36

3 つの HTML オブジェクトがあり、左側に [前へ] ボタン、右側に [次へ] ボタンを配置し、コンテナ div 内の中央にスパンします。

<PREVIOUS> |SPAN| <NEXT>


    #btnPrevious
    {
        float:left;
    }
    #spanStage
    {
        font-weight:bold;
        vertical-align:middle;    
    }
    #btnNext
    {
        float:right;
    }
    <div>
        <input type="button" value="Previous" id="btnPrevious"/>
        <span id="spanStage">Stage 5</span>
        <input type="button" value="Next" id="btnNext"/>
    </div>

4

5 に答える 5

24

ラッパーに追加text-align: centerするだけで、すべての非フローティング/非配置の子の水平方向の配置を設定できます。

div{
    text-align:center;
}

<span>デフォルトではインライン要素です。したがってdisplay:block、それらを使用して適切にスタイルを設定するか、親スタイルを少し調整する必要があります。<span>とs以外に子供はいないので<button>、この単純なソリューションで最善を尽くします。

これは親から継承されることに注意してtext-align:<value>ください。ラッパーに他の何かを含めたい場合は、問題がないかどうかを確認する必要text-align:centerがあります。それ以外の場合は、text-align:<value>特定の要素で使用します。ここで、、、、または。valueleftrightcenterjustify

JSFiddleデモ

于 2012-06-16T12:20:10.080 に答える
8

line必要なすべての子要素にクラスを1行で追加すると、出来上がりです。彼らはあなたが列に並ぶことを守っています。

.line {
    width:33%;
    float:left;
}
<div>
    <input type="button" class="line" value="Previous" id="btnPrevious"/>
    <span id="spanStage" class="line">Stage 5</span>
    <input type="button" class="line" value="Next" id="btnNext"/>
</div>

于 2012-06-16T12:18:54.547 に答える
4

これをcssに追加するだけです。

#btnPrevious,#spanStage,#btnNext {
      width:33%;
       display:inline-block;
     }
于 2016-08-30T15:03:50.423 に答える