Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendatar Memusatkan Imej Di Dalam Bekas Divnya?

Bagaimana untuk Mendatar Memusatkan Imej Di Dalam Bekas Divnya?

Susan Sarandon
Susan Sarandonasal
2024-12-18 16:20:14410semak imbas

How to Horizontally Center an Image Inside its Div Container?

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>
#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.

Atas ialah kandungan terperinci Bagaimana untuk Mendatar Memusatkan Imej Di Dalam Bekas Divnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn