Bagaimanakah Saya Boleh Memusatkan Teks dan Imej Secara Menegak dalam Bootstrap 3?

Teks dan Imej Pemusatan Menegak dalam Twitter Bootstrap 3 (Pendua)

Banyak pertanyaan telah dibuat mengenai penjajaran menegak teks dan imej dalam Twitter Bootstrap 3. Topik ini memerlukan perbincangan lanjut.

Apabila menggunakan Bootstrap 3 dengan kandungan dinamik, menentukan saiz tepat elemen visual boleh menjadi mencabar. Selain itu, reka letak harus mengekalkan responsif.

Untuk memusatkan teks dan imej secara menegak, pertimbangkan untuk menggunakan pendekatan alternatif. Daripada mengapungkan elemen, tetapkan paparannya kepada inline-block. Selain itu, gunakan vertical-align:middle untuk memastikan penjajaran menegak yang betul.

Di bawah ialah contoh coretan CSS yang menunjukkan teknik ini:

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

Dengan melaksanakan pelarasan ini, anda boleh memusatkan anda dengan mudah teks dan imej secara menegak dalam cara responsif, walaupun dengan dimensi kandungan yang tidak diketahui.

Untuk siaran langsung demonstrasi, rujuk pautan Bootply berikut:

http://bootply.com/94402

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