div 内の HTML 要素の水平方向の配置を実装します。

Question

3 つの HTML オブジェクトがあり、コンテナ div の左側に「前へ」ボタン、右側に「次へ」ボタン、中央にスパンを配置したいと考えています。

<PREVIOUS> |SPAN| <NEXT>

<code> #btnPrevious
    {
        フロート:左;
    }
    #スパンステージ
    {
        フォントの太さ:太字;
        垂直配置:中央;
    }
    #btn次へ
    {
        フロート:右;
    }</code>

<code> <div>
        <input type="button" value="前" id="btn前"/>
        <span id="spanStage">ステージ 5</span>
        <input type="button" value="Next" id="btnNext"/>
    </div></code>

Answer 1

「display:flex」スタイルは、これらの要素を同じ行に配置するための優れた方法です。 div に含まれる要素の種類は関係ありません。特に入力クラスがフォームコントロールの場合、ブートストラップやインラインブロックなどの他のソリューションはうまく機能しません。

＃＃＃例：＃＃＃ リーリー

フレックスボックスの詳細:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

フレックス方向: 行、列

justify-content: flex-end、center、space-between、space-around

align-items: ストレッチ、フレックススタート、フレックスエンド、センター

Answer 2

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

リーリー

<span>デフォルトはインライン要素です。したがって、それらに display:block を使用して適切にスタイルを設定するか、親要素のスタイルをわずかに調整することができます。 <span> と <button> 以外には子要素がないため、この単純な解決策を使用することをお勧めします。

text-align:<value> は親要素から継承されることに注意してください。そのため、ラッパーに他のコンテンツを含めたい場合は、text-align:center をチェックする必要があります。 それがあなたに適しているかどうか。それ以外の場合は、特定の要素で text-align:<value> を使用します。value は、left、right、## です。 #center または justify。

JSFiddle デモ