Bagaimana untuk Memusatkan Imej dalam Div Induk Sambil Mengekalkan Ketinggian dan Nisbah Aspek?

Elemen Imej Tengah dalam Div Induk

Memusatkan imej dalam div induknya memerlukan teknik CSS khusus. Begini cara untuk mencapainya:

Masalah:

Cara menjajarkan imej di tengah-tengah div induknya sambil mengekalkan ketinggiannya (100%) tanpa meregangkan lebarnya ?

Contoh:

Pertimbangkan HTML dan CSS yang disediakan dalam soalan:

<code class="html"><div class="box">
  <img src='featured.jpg' />
</div></code>

<code class="css">.box {
  height: 100%;
  width: 450px;
  border: 2px solid red;
  background: green;
  overflow: hidden;
}
.box img {
  height: 100%;
  width: auto;
  text-align: center;
}</code>

Penyelesaian:

Untuk memusatkan imej, tambahkan penjajaran teks: tengah; Pengisytiharan CSS kepada div induk dan bukannya elemen imej anak:

<code class="css">.box {
  /* ... */
  text-align: center;  /* Align center all inline elements */
}</code>

Ini memusatkan semua elemen sebaris dalam div, termasuk imej.

Peningkatan Tambahan:

Mungkin terdapat jurang di bawah imej disebabkan ketinggian garisan yang dikhaskan untuk elemen sebaris. Untuk mengalih keluar jurang ini, tambahkan jajaran menegak: bawah; ke CSS imej:

<code class="css">.box img {
  /* ... */
  vertical-align: bottom;  /* Fix the vertical gap */
}</code>

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