Bagaimana untuk Memusatkan Imej Secara Mendatar dan Menegak Dalam Div?

Menjajarkan Imej Secara Tengah Dalam Div

Mengekalkan penjajaran imej yang betul dalam halaman web selalunya boleh menimbulkan cabaran. Dalam contoh khusus ini, untuk mencapai pemusatan mendatar dan menegak bagi imej di dalam elemen div tertentu memerlukan pendekatan yang disasarkan.

Untuk mencapai penjajaran yang diingini, imej mesti diletakkan di tengah-tengah elemen div kedua-duanya secara mendatar dan secara menegak. Untuk melakukan ini, sifat CSS berikut boleh digunakan:

body {
  margin: 0;
}

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

Berikut ialah pecahan cara sifat ini berfungsi:

1. margin-kiri: auto; dan jidar kanan: auto;: Sifat ini melaraskan secara automatik jidar kiri dan kanan elemen imej, menolaknya ke arah tengah bekas induknya (elemen div).
2. paparan : blok;: Sifat ini memastikan elemen imej berkelakuan seperti elemen peringkat blok, mengambil lebar penuh bekas induknya. Ini menghalang imej daripada bertindan di atas elemen lain dalam div.

Dengan sifat CSS ini diletakkan, imej akan diletakkan di tengah dan tengah elemen div, memberikannya ciri yang diingini penjajaran.

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