Bagaimana untuk Mencapai Teks Menegak Sempurna dan Penjajaran Imej dalam Bootstrap 3?

Penjajaran Teks dan Imej Menegak dalam Twitter Bootstrap 3

Walaupun berleluasanya pertanyaan mengenai topik ini, mencapai penjajaran menegak teks dan imej dalam Twitter Bootstrap 3 boleh menjadi sukar difahami, terutamanya untuk kandungan dinamik yang berbeza-beza dimensi.

Untuk menangani cabaran ini, demonstrasi Bootply telah dibuat untuk menggambarkan reka letak yang diingini, di mana teks dan imej dipusatkan secara menegak, tanpa mengira saiz relatifnya.

Penyelesaian terletak pada menggunakan paparan:inline-block dan bukannya float untuk lajur teks dan imej. Ini membolehkan kami menggunakan vertical-align:middle dengan CSS berikut:

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

Dengan menetapkan margin-right kepada nilai negatif, kami memastikan bahawa lajur diletakkan sebelah menyebelah, sambil mengekalkan penjajaran menegaknya .

Untuk menguji pendekatan ini, navigasi ke demo di http://bootply.com/94402, di mana teks dan imej dipusatkan dengan betul secara menegak, menyesuaikan diri dengan saiz kandungan yang berbeza-beza.

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