Bagaimana untuk Memusatkan Kandungan Secara Menegak dalam Bootstrap 3?

Tegak Tengahkan Kandungan dalam Twitter Bootstrap 3

Apabila bekerja dengan kandungan dinamik dalam Bootstrap 3, cabaran biasa ialah memusatkan kedua-dua teks dan imej secara menegak , terutamanya apabila saiznya boleh berbeza-beza. Begini cara anda boleh mencapai reka letak responsif, berpusat menegak ini:

Penyelesaian:

Daripada menggunakan sifat apungan tradisional, pilih paparan:sekatan-sebaris dan gunakan menegak -align:tengah kepada elemen yang berkaitan dengan yang berikut CSS:

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

Penjelasan:

• display:inline-block membenarkan elemen untuk duduk bersebelahan sambil mengekalkan keupayaan untuk menggunakan ketinggian dan lebar.
• vertical-align:tengah menjajarkan pusat menegak elemen dengan bahagian tengahnya induk.
• Bibir kanan negatif melaraskan jarak antara elemen untuk reka letak yang lebih halus.

Demo:

Untuk siaran langsung demonstrasi, lawati: http://bootply.com/94402

Penyelesaian ini memastikan bahawa kedua-dua teks dan imej adalah berpusat secara menegak dalam lajur masing-masing, walaupun saiznya berubah secara dinamik, memberikan reka letak responsif dan menarik secara visual.

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