Bagaimana untuk memusatkan imej dengan css

Dalam halaman HTML, menggunakan imej boleh menjadikan halaman lebih kaya. Walau bagaimanapun, apabila menggunakan imej, kita mungkin menghadapi masalah bahawa imej tidak berpusat. Ini kerana lokasi imej ditentukan secara automatik oleh penyemak imbas dan bukannya ditetapkan secara manual oleh kami. Pada ketika ini, kita boleh menggunakan CSS untuk memusatkan imej. Artikel ini akan memperkenalkan cara untuk memusatkan imej dengan CSS.

1 Gunakan jidar untuk memusatkan imej

Menggunakan jidar ialah cara yang paling biasa untuk memusatkan imej. Kita boleh memusatkan imej dengan menambah nilai margin 50% untuk bahagian atas, bawah, kiri dan kanan, dan kemudian negatif separuh daripada lebar/tinggi imej.

Contoh kod:

HTML:

<div class="container">
  <img class="center-image" src="example.jpg">
</div>

CSS:

.container {
  position: relative;
}

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

2. Gunakan flexbox untuk memusatkan imej

Flexbox ialah reka letak CSS3 yang membolehkan kami memusatkan elemen anak dengan mudah dengan menetapkan sifat flex elemen induk. Sebagai contoh, kod CSS berikut boleh memusatkan semua elemen kanak-kanak secara mendatar dan menegak:

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

Kemudian khusus untuk memusatkan elemen gambar, kita hanya perlu menetapkan bekas di mana gambar terletak untuk melenturkan reka letak dan menetapkan align-item Hanya gunakan atribut justify-content.

Contoh kod:

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

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

3. Gunakan grid untuk memusatkan imej

Sama seperti flexbox, kami juga boleh menggunakan grid CSS untuk memusatkan imej. Kami menggunakan bekas imej sebagai bekas grid dan menetapkannya kepada penjajaran tengah.

Contoh kod:

HTML:

<div class="container">
  <img src="example.jpg">
</div>

CSS:

.container {
  display: grid;
  place-items: center;
}

Ringkasan:

Di atas ialah tiga kegunaan Untuk kaedah memusatkan gambar, kita boleh memilih kaedah mengikut situasi sebenar. Kaedah margin paling kerap digunakan, tetapi jika anda perlu melaksanakan susun atur lain, flexbox dan grid mungkin lebih sesuai untuk anda. Sudah tentu, dalam pembangunan sebenar, pelbagai kaedah juga boleh digunakan dalam kombinasi untuk mencapai hasil yang lebih baik.

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