Bagaimana untuk memusatkan imej dalam div dengan css

Kaedah untuk memusatkan imej dalam div dalam CSS ialah: Penjajaran teks: sesuai untuk pemusatan menegak imej dan teks. Flexbox: Sesuai untuk pemusatan mendatar dan menegak imej. Penukaran: berfungsi untuk imej saiz tetap. Jidar automatik: sesuai untuk situasi di mana lebar imej diketahui.

Cara untuk memusatkan imej dalam div dalam CSS

Kaedah 1: text-align

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

Kaedah ini sesuai untuk situasi di mana anda mahu imej dipusatkan bersama-sama dengan teks secara menegak .

Kaedah 2: flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

flexbox membolehkan susun atur fleksibel Kaedah ini sesuai untuk situasi di mana imej perlu dipusatkan secara mendatar dan menegak.

Kaedah 3: transform

<code class="css">div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

Kaedah ini menggunakan kedudukan dan transformasi mutlak dan sesuai untuk imej bersaiz tetap.

Kaedah 4: margin auto

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

margin: auto secara automatik memusatkan imej, tetapi hanya boleh digunakan apabila lebar imej diketahui.

Atas ialah kandungan terperinci Bagaimana untuk memusatkan imej dalam div dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!