Bagaimana untuk Memusatkan Imej dengan Sempurna dalam Div Induk Menggunakan CSS dan Sifat Imej?

Imej Tengah: Panduan Menjajarkan Imej Dalam Div Induk

Apabila bekerja dengan imej dalam HTML, selalunya wajar untuk memusatkannya secara mendatar dalam div ibu bapa mereka. Untuk mencapai matlamat ini, seseorang mesti mempertimbangkan dengan teliti kedua-dua sifat CSS dan atribut elemen.

Menggunakan CSS

Untuk memusatkan imej dalam div induk, anda boleh menambah teks- align: tengah; pengisytiharan kepada CSS div induk. Ini menjajarkan semua elemen sebaris dalam div, termasuk imej.

<code class="CSS">.box {
    text-align: center;
}</code>

Menggunakan Ketinggian Imej dan Lebar Auto

Pastikan bahawa imej mempunyai ketinggian 100% dan lebar automatik. Ini memastikan ketinggian imej terbentang agar sesuai dengan div induk sambil mengekalkan nisbah bidangnya.

<code class="CSS">.box img {
    height: 100%;
    width: auto;
}</code>

Mengatasi Jurang Menegak

Dalam sesetengah kes, anda mungkin melihat jurang menegak di bawah imej. Ini disebabkan oleh aksara simpanan ketinggian baris yang dikaitkan dengan elemen sebaris seperti . Untuk mengalih keluar jurang ini, tambahkan jajaran menegak: bawah; kepada CSS imej.

<code class="CSS">.box img {
    vertical-align: bottom;
}</code>

Kesimpulan

Dengan menggunakan gabungan penjajaran CSS dan saiz imej yang betul, anda boleh memusatkan imej dengan berkesan dalam div induk. Teknik ini menyediakan reka letak yang konsisten dan menarik secara visual untuk elemen halaman web anda.

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