Bagaimana untuk Mencapai Penjajaran Menegak dalam Bootstrap 4?

Penjajaran Menegak dalam Bootstrap 4

Menjajarkan elemen seperti elemen teks dalam Bootstrap 4 boleh mengecewakan. Biasanya, utiliti penjajaran teks hanya boleh digunakan untuk penjajaran mendatar, dan kebanyakan teknik penjajaran menegak biasanya dilaksanakan dengan menambah penanda tambahan dan mengatasi gaya lalai.

kelas flex-xs-middle

Versi Bootstrap yang lebih lama (seperti Bootstrap 3 dan versi Bootstrap 4 yang terdahulu) menggunakan kelas flex-xs-middle untuk menegak unsur pusat. Kelas ini boleh ditambah pada bekas untuk memusatkan kandungannya secara menegak menggunakan flexbox:

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

Kemas Kini Bootstrap 4.0.0

Setakat Bootstrap 4.0.0, flexbox menjadi tetapan lalai. Oleh itu, kini adalah mungkin untuk menjajarkan elemen secara menegak dengan menggunakan beberapa kaedah:

auto-margin

Utiliti my-auto boleh digunakan untuk memusatkan elemen secara automatik secara menegak, contohnya:

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

flexbox

flexbox Utiliti, seperti align-self-center, boleh digunakan untuk menjajarkan satu lajur atau semua lajur dalam keseluruhan baris, contohnya:

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

Utiliti Paparan

Bootstrap 4 juga disertakan dengan set utiliti paparan yang boleh digunakan sebagai alternatif kepada penjajaran menegak, contohnya:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penjajaran Menegak dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!