Bootstrap 4 でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?

Bootstrap 4 の垂直方向の配置

問題の概要

Bootstrap 4 では、特定の要素の垂直方向の配置が難しい場合があります。一般的な問題は、行内でコンテンツを垂直方向の中央に配置しようとするとき、特にテキスト「Supplier」を含む要素で発生します。

ソリューションの概要

Bootstrap 4 では、フレックスボックス ユーティリティなど、垂直方向の配置のためのいくつかの方法が導入されています。 、自動マージン、および表示ユーティリティ。

フレックスボックスアプローチ

Bootstrap 4 Alpha 5 以前:

<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>

Bootstrap 4 Stable:

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Bootstrap 4 Flexbox byデフォルト:

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

自動マージンアプローチ

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

表示ユーティリティアプローチ

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

結論

これらのメソッドはさまざまな機能を提供しますBootstrap 4 で要素を垂直に整列させるためのオプション。特定の要件に最も適したアプローチを選択することを忘れないでください。およびブラウザの互換性に関する考慮事項。

以上がBootstrap 4 でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。