Bagaimana untuk Mendatar Memusatkan Imej Di Dalam Bekas Divnya?

Cara Memusatkan Imej Secara Mendatar Dalam Div Bekasnya

Masalah:

Anda perlukan untuk menjajarkan imej secara mendatar dalam elemen div yang mengandunginya. Berikut ialah HTML dan CSS untuk persediaan yang bermasalah:

<div>
<pre class="brush:php;toolbar:false">#thumbnailwrapper {
  ...
}

#artiststhumbnail {
  width: 120px;
  height: 108px;
  overflow: hidden;
}

Penyelesaian:

Untuk memusatkan imej secara mendatar dalam bekasnya, gunakan CSS berikut:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Kod ini menyatakan bahawa imej harus dipaparkan sebagai elemen blok dan ia harus mempunyai jidar automatik pada semua sisi. Ini akan memusatkan imej secara mendatar dalam bekasnya.

Penjelasan:

Paparan: blok; sifat menentukan bahawa imej harus dianggap sebagai elemen blok. Ini bermakna bahawa ia akan mengambil lebar penuh bekasnya dan akan memecahkan aliran teks di sekelilingnya.

Jing: auto; sifat menentukan bahawa margin pada semua sisi imej harus ditetapkan kepada automatik. Ini bermakna penyemak imbas akan mengira jidar secara automatik supaya imej berada di tengah dalam bekasnya.

Penyelesaian ini memastikan imej akan dipusatkan secara mendatar dalam bekasnya tanpa mengira saiz bekas atau imej.