[解決済み] スパン内のテキストを中央揃えにするにはどうすればよいですか？

質問

ご覧ください これ ウェブサイト

テスト用のTESTを、それが含まれるスパンの真ん中に表示させるには？

Twitter Bootstrapを使用しています。

CSS、インラインスタイル、マージン設定など、さまざまな方法を試しましたが、スパンを必要なようにすることができません。 まるで、テキストの幅にぴったり合わせて描画されているように見えます。

私の主な目的は、Nationwide Alertsのテキストをボタンと同じ行になるように下げることができるようにすることです。

厄介なのは、ページがリサイズされるため、このスパンにハードコードされた幅を与えることができないことです。

ポール

解決方法は？

スパンに背景色を付けて、動作しない理由を確認します。これらの3つの項目は、CSSが関連付けられていないdivの中にあります。spanが真ん中に来るようにするには、それを囲むdivに最低限、width & text-alignのプロパティが必要なのです。

変更

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

になります。

        <div class="centerTest">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

を好きな名前に変更し、使用します。

.centerTest {
    width:100%;
    text-align:center;
}

さらに、このマークアップでは、そのままのコードでspanが中央に配置されますが、このマークアップに float:left の後に btnPrevious を指定します。HTMLメールをデザインするとき以外は、インラインCSSの使用はできるだけ控え、CSSファイルのリストで最後にインクルードするCSSファイルを作成し、そこに編集内容を追加すればよいでしょう。

例えば btnPrevious がテンプレートの CSS ファイルにある場合、あなたの CSS ファイルに次のように追加します。

#btnPrevious {
    float:left;
}

で、OKです。

EDIT

Bootstrapの部分は、今あなたのコード内のTESTを検索してみたので、見逃してすみません。Bootstrapはこれらのクラスで構築されており、これらはすでにコンテナの中にあるため、このクラスに text-center を空白のdivに追加すると、トリックが実行されるはずです。

変更

        <div>
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>

になります。

        <div class="text-center">
            <button id="btnPrevious" type="button">Previous</button>                
            <span style="width: 100%;text-align: center">TEST</span>
            <button id="btnNext" type="button" style="float: right">Next</button>
        </div>