Bagaimanakah Saya Boleh Memusatkan Kandungan Secara Menegak dalam Twitter Bootstrap 3?

Memusatkan Kandungan Secara Menegak dalam Twitter Bootstrap 3

Ramai pengguna telah menghadapi cabaran dalam teks dan imej yang memusatkan secara menegak dalam Twitter Bootstrap 3. Artikel ini menyediakan penyelesaian yang memanfaatkan kandungan responsif dan dinamik.

Satu pendekatan ialah menggunakan harta display:inline-block bukannya float. Ini membolehkan kandungan dijajarkan secara menegak sambil mengekalkan keupayaan untuk bertindak balas kepada saiz skrin yang berbeza. Dengan memasukkan vertical-align:middle, kedua-dua teks dan imej akan dipusatkan secara menegak.

Untuk melaksanakan penyelesaian ini, cuma tambah CSS berikut:

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

Ini akan memusatkan kedua-dua teks dan imej, tanpa mengira saiz relatifnya.

Demonstrasi berfungsi tersedia di http://bootply.com/94402, mempamerkan cara kandungan bertindak balas secara dinamik kepada perubahan resolusi skrin sambil mengekalkan penjajaran menegak.

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