Bagaimana untuk Memusatkan Kandungan Secara Menegak dalam Bootstrap 4?

Penjajaran Menegak dalam Bootstrap 4

Pengenalan Isu

Dalam Bootstrap 4, penjajaran menegak elemen tertentu boleh menjadi mencabar. Kesukaran biasa timbul apabila cuba memusatkan kandungan secara menegak dalam satu baris, terutamanya elemen yang mengandungi teks "Pembekal."

Gambaran Keseluruhan Penyelesaian

Bootstrap 4 memperkenalkan beberapa kaedah untuk penjajaran menegak, termasuk utiliti flexbox , auto-margin dan utiliti paparan.

Flexbox Pendekatan

Bootstrap 4 Alpha 5 dan Terdahulu:

<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 oleh Lalai:

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

Pendekatan Auto-Margin

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

Pendekatan Utiliti Paparan

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

Kesimpulan

Kaedah ini menyediakan pelbagai pilihan untuk menjajarkan elemen secara menegak dalam Bootstrap 4. Ingat untuk memilih pendekatan yang paling sesuai dengan spesifik anda keperluan dan pertimbangan keserasian penyemak imbas.

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