Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Imej Secara Menegak dan Mendatar Di Dalam Div?

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

DDD
DDDasal
2025-01-03 18:23:44175semak imbas

How to Vertically and Horizontally Center an Image Inside a 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!

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