Bagaimanakah Saya Boleh Memusatkan Kandungan Secara Menegak dalam Bootstrap 3?

Kandungan Pemusatan Menegak dalam Twitter Bootstrap 3

Untuk penjajaran menegak yang responsif dan dinamik bagi teks dan imej dalam Bootstrap 3, pertimbangkan pendekatan berikut :

CSS Kod:

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

Penjelasan:

CSS yang disediakan membuat perubahan yang diperlukan pada lajur Bootstrap asal:

• terapung : tiada mengalih keluar penjajaran mendatar, membenarkan penjajaran menegak.
• paparan: blok sebaris merawat lajur sebagai elemen sebaris, yang boleh dijajarkan secara menegak.
• menjajarkan menegak: tengah menegak memusatkan kandungan dalam lajur.
• margin-kanan: -4px membetulkan isu jarak kecil antara lajur.

Demo:

Lawati [http://bootply.com/94402](http://bootply.com/94402) untuk melihat demonstrasi berfungsi penyelesaian ini.

Nota Tambahan:

• Pastikan elemen bekas mempunyai ketinggian yang mencukupi untuk penjajaran menegak berfungsi.
• Jika anda memerlukan saiz lajur yang berbeza, laraskan kelas col-lg dengan sewajarnya.
• Jika anda menghadapi masalah dengan saiz imej yang berbeza, laraskan sifat jajar menegak mengikut keperluan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Kandungan Secara Menegak dalam Bootstrap 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!