Bagaimanakah Saya Memusatkan Imej Secara Mendatar dan Menegak Dalam Div?

Memusatkan dalam Div: Mencapai Penjajaran Visual

Dalam bidang pembangunan web, menjajarkan elemen adalah penting untuk mencipta reka bentuk yang menarik secara visual dan berfungsi . Apabila berurusan dengan imej dalam div, memastikan ia dipusatkan secara mendatar dan menegak menjadi penting.

Pertimbangkan coretan HTML berikut:

<div>

Secara lalai, imej akan diletakkan pada sudut kiri atas div. Untuk mencapai pemusatan yang sempurna, gabungan sifat CSS diperlukan:

Pemusatan Mendatar:
Untuk memusatkan imej secara mendatar, peraturan CSS berikut digunakan:

#over img {
  margin-left: auto;
  margin-right: auto;
}

Kod ini mengarahkan penyemak imbas untuk melaraskan secara automatik jidar kiri dan kanan imej supaya jaraknya sama dalam bekas.

Pemusatan Menegak:
Untuk pemusatan menegak, sifat paparan akan dimainkan:

#over img {
  ...
  display: block;
}

Menetapkan paparan: blok memastikan imej berkelakuan seperti elemen peringkat blok, menggunakan lebar penuh yang tersedia dalam div.

Peraturan CSS gabungan ini dengan berkesan memusatkan imej secara mendatar dan menegak, menghasilkan imej yang sejajar dengan sempurna dalam div.

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