web-dev-qa-db-ja.com

Bootstrap 4の垂直方向の配置

Bootstrap 4に次のセットアップがあります： Bootply link

「Supplier」テキストを含む要素は垂直方向に中央揃えする必要があります。同じコードの異なる行があり、それらを中央揃えにする必要があります。解決策はありません。

ここの誰かが私が間違ったことを見つけて、正しい方向に私を向けることができますか？

ありがとうございました。

bootstrap-4twitter-bootstrap-4
25
Nelsch

このようにflex-xs-middleクラスを使用できます。

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 （Bootstrap 4 flexbox enabled CSSを使用）

ブートストラップ4

Bootstrap 4.0.0の更新

Bootstrap 4はデフォルトでflexboxであるため、次を使用して垂直方向の配置にさまざまなアプローチがあります。 auto-margins 、 flexbox utils 、または display utils と一緒に vertical align utils 。最初は「vertical align utils」は明らかなように見えますが、これらのonlyはインラインおよびテーブル表示要素で動作します。以下は、Bootstrap 4つの垂直方向の中央揃えオプションです。 、垂直方向の配置は 親の高さ 。に相対的であることを忘れないでください

1-自動マージンを使用した垂直方向の中央：

垂直方向に中央揃えする別の方法は、my-autoを使用することです。これにより、コンテナ内の要素が中央に配置されます。たとえば、h-100は行を完全な高さにし、my-autoはcol-sm-12列を垂直方向に中央揃えにします。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

自動マージンを使用した垂直中心デモ

my-autoは、垂直y軸のマージンを表し、次と同等です。

margin-top: auto;
margin-bottom: auto;

2-フレックスボックス付き垂直センター：

vertical center grid columns

Bootstrap 4 .rowがdisplay:flexになったので、任意の列でalign-self-centerを使用して、垂直方向に中央揃えすることができます...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

または、align-items-center全体で.rowを使用して、行のすべてのcol-*を垂直方向に中央揃えにします...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

垂直中央の異なる高さの列デモ

重要： direct位置合わせする要素の親には、定義済みのheight ！が必要です。

3-ディスプレイユーティリティを使用した垂直方向の中央：

ブートストラップ4には、 display utils があり、display:table、display:table-cell、display:inlineなどに使用できます。これらは 垂直配置で使用できますutils インライン、インラインブロック、またはテーブルセル要素を整列します。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

表示ユーティリティを使用した垂直センターデモ

70
Zim