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

div {
  text-align: center;
}

img {
  display: inline-block;
}

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

Kaedah 2: flexbox

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}

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

Kaedah 3: transform

div {
  position: relative;
}

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

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

Kaedah 4: margin auto

div {
  text-align: center;
}

img {
  margin: auto;
}

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!