Bagaimana untuk Meletakkan Imej Secara Menegak dan Mendatar Berpusat dalam Div Induk?

Memusatkan Elemen Imej dalam Div Induk

Apabila ingin meletakkan imej di tengah-tengah dalam div induknya, hasil yang diinginkan adalah untuk imej untuk kekal berpusat secara menegak dalam induk, sambil mengekalkan ketinggian yang wujud.

Penyelesaian:

Untuk mencapai kesan ini, ubah suai pengisytiharan CSS bagi parent .box div, bukannya child .box img div, dengan menambahkan text-align: center;. Pindaan ini memastikan bahawa semua elemen sebaris dalam div induk dijajarkan secara berpusat.

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

Oleh itu, CSS yang dikemas kini menjamin bahawa elemen imej akan sentiasa diletakkan di tengah-tengah div induknya, mengekalkan ketinggian sebenarnya .

Mengatasi Isu Jurang Menegak:

Setelah pemeriksaan lanjut, didapati bahawa jurang 5px telah muncul di bawah imej tengah. Jurang ini dikaitkan dengan tempahan ketinggian garisan untuk elemen sebaris seperti . Untuk menghapuskan jurang ini, jajaran menegak: bawah; harus ditambahkan pada CSS imej.

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

Dengan mengikuti langkah ini, anda boleh memusatkan imej dengan berkesan dalam div induk, mengekalkan ketinggian yang dimaksudkan sambil menghapuskan sebarang jurang menegak yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Imej Secara Menegak dan Mendatar Berpusat dalam Div Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!