Bootstrap 4 でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-11-24 04:31:09

オリジナル

224 人が閲覧しました

How to Vertically Center Content in 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>

ログイン後にコピー