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

Bootstrap 4 で垂直方向の配置を実現するにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-23 04:14:19

オリジナル

1059 人が閲覧しました

How to Achieve Vertical Alignment in Bootstrap 4?

Bootstrap 4 での垂直方向の配置

Bootstrap 4 でのテキスト要素などの要素の配置はイライラすることがあります。通常、text-align ユーティリティは水平方向の配置にのみ使用でき、ほとんどの垂直方向の配置手法は通常、追加のマークアップを追加し、デフォルトのスタイルをオーバーライドすることによって実装されます。

flex-xs-middle クラス

Bootstrap の古いバージョン (Bootstrap 3 や Bootstrap 4 の以前のバージョンなど) は、垂直方向に flex-xs-middle クラスを使用します。中心要素。このクラスをコンテナに追加して、フレックスボックスを使用してコンテンツを垂直方向の中央に配置できます。

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

ログイン後にコピー

Bootstrap 4.0.0 の更新

Bootstrap 4.0.0 以降、フレックスボックスデフォルト設定になります。したがって、いくつかの方法を使用して要素を垂直方向に整列できるようになりました。

auto-margins

my-auto ユーティリティを使用して、要素を垂直方向に自動的に中央揃えにすることができます。例:

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

ログイン後にコピー

フレックスボックス

フレックスボックス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>

ログイン後にコピー

Display Utilities

Bootstrap 4 には、垂直方向の配置の代わりに使用できる一連の表示ユーティリティも付属しています。例:

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

ログイン後にコピー

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