Bagaimana untuk Memusatkan Imej dalam Div Induk?

Memusatkan Imej dalam Div Induk

Mengekalkan imej yang dijajarkan secara berpusat dalam div induk boleh meningkatkan estetika tapak web dan pengalaman pengguna. Artikel ini membincangkan cara untuk mencapai penjajaran ini dengan cekap.

Pernyataan Masalah:

Jajarkan imej dalam div induk supaya pusatnya kekal di tengah div , memastikan imej menjangkau ketinggian penuh div tanpa meregangkan lebarnya.

Penyelesaian:

Daripada menggunakan text-align: center; Pengisytiharan CSS pada elemen imej, tambahkannya pada elemen .box induk.

.box {

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

}

Pendekatan ini memastikan bahawa semua elemen sebaris dalam div .box dipusatkan, termasuk imej.

Pertimbangan Tambahan:

Jika jurang 5px muncul di bawah imej, ia mungkin terhasil daripada ketinggian baris lalai yang dikaitkan dengan elemen sebaris. Untuk menghapuskan jurang ini, gunakan penjajaran menegak: bawah; kepada elemen imej:

.box img {

height: 100%;
width: auto;
vertical-align: bottom; // fix the vertical gap

}

Dengan melaksanakan pengubahsuaian ini, anda boleh memusatkan imej anda dengan berkesan dalam div induk dan memastikan penampilan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej dalam Div Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!