Bagaimana untuk Memusatkan Imej Secara Menegak dan Mendatar Di Dalam Div?

Memusatkan Imej Secara Menegak dan Mendatar dalam Div yang Lebih Besar

Apabila membenamkan imej dalam div yang lebih besar, memastikan penjajaran yang betul boleh menjadi penting. Pemusatan menegak, khususnya, boleh mencabar. Begini cara untuk mencapai pemusatan mendatar dan menegak dengan berkesan:

Kedudukan Mutlak dengan Margin Automatik

Kaedah yang berkesan melibatkan penggunaan kedudukan mutlak dengan jidar automatik. Teknik ini membolehkan anda memusatkan imej secara mendatar dan menegak dalam div, walaupun dalam senario di mana div yang mengandungi tidak mempunyai ketinggian tetap.

Untuk melaksanakan penyelesaian ini:

1. Berikan imej kedudukan mutlak menggunakan kedudukan: mutlak;.
2. Tetapkan margin harta kepada auto; untuk membenarkan penyemak imbas melaraskan jidar secara automatik.
3. Nyatakan nilai atas, kiri, kanan dan bawah hingga 0. Ini mengarahkan imej untuk menduduki seluruh ruang induknya div.

Berikut ialah contoh coretan kod:

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Dengan teknik ini, imej akan dipusatkan secara menegak dan mendatar dalam div, tanpa mengira ketinggian div.

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