Bagaimana untuk memusatkan imej dalam css

Dalam reka bentuk web, gambar merupakan elemen yang sangat diperlukan. Apabila saiz imej lebih kecil daripada bekas induk, atau lebar dan ketinggian bekas induk tidak pasti, cara untuk memusatkan imej menjadi masalah. Kita boleh menyelesaikan masalah ini melalui susun atur fleksibel CSS dan sifat kedudukan.

1. Gunakan reka letak fleksibel

Reka letak fleksibel ialah kaedah reka letak baharu yang diperkenalkan oleh CSS3. Ia boleh mengawal reka letak bekas dengan mudah .

1 Gunakan atribut justify-content dan align-item

Kita boleh menggunakan atribut justify-content dan align-item dalam reka letak fleksibel untuk mencapai pemusatan mendatar dan menegak imej. Atribut justify-content boleh mengawal reka letak elemen kanak-kanak dalam arah paksi utama, dan atribut item align boleh mengawal reka letak elemen kanak-kanak dalam arah paksi silang.

Mula-mula, kita perlu menetapkan bekas induk imej kepada display:flex, dan tetapkan align-item dan justify-content ke tengah.

<div class="parent">
  <img src="your-image.jpg">
</div>

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

Dengan cara ini, imej akan dipusatkan secara mendatar dan menegak.

2 Gunakan atribut flex-direction dan align-self

Kita juga boleh menggunakan atribut flex-direction dan align-self dalam reka letak flex untuk memusatkan imej. Sifat arah lentur boleh menukar arah paksi utama, dan sifat penjajaran diri boleh mengawal susun atur elemen kanak-kanak dalam arah paksi silang.

Tetapkan bekas induk imej kepada display:flex, dan tetapkan arah-flex kepada lajur.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  flex-direction: column;
}

Seterusnya, kita perlu menetapkan sifat penjajaran-diri imej ke tengah untuk mencapai pemusatan menegak imej.

img {
  align-self: center;
}

2. Gunakan atribut kedudukan

Selain menggunakan reka letak fleksibel, kita juga boleh menggunakan atribut kedudukan untuk memusatkan imej. Cara anda menggunakan harta kedudukan adalah sedikit berbeza.

1. Gunakan kedudukan mutlak

Kita boleh menetapkan imej kepada kedudukan mutlak, dan kemudian menggunakan atribut kiri dan atas untuk mengawal kedudukan imej dalam bekas induk. Tetapkan kedudukan bekas induk kepada relatif supaya imej boleh diletakkan relatif kepada bekas induk.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

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

Dengan cara ini, imej akan dipusatkan secara mendatar dan menegak.

2. Gunakan jidar negatif

Kita juga boleh menggunakan jidar negatif untuk memusatkan imej. Kaedah ini dilaksanakan dengan menambahkan elemen tambahan pada bekas induk. Tetapkan bekas induk kepada position:relative, tambah elemen kosong dan letakkan imej dalam elemen kosong.

<div class="parent">
  <div class="placeholder"></div>
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

.placeholder {
  height: 100%;
  margin-right: -100%;
}

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

Dengan cara ini, imej juga boleh dipusatkan secara mendatar dan menegak.

Ringkasan perkara utama

Apabila memusatkan imej, kita boleh menggunakan reka letak fleksibel dan atribut kedudukan untuk mencapainya. Apabila menggunakan reka letak fleksibel, kita boleh menggunakan sifat justify-content dan align-item, serta sifat flex-direction dan align-self. Apabila menggunakan atribut kedudukan, kita boleh menetapkan imej kepada kedudukan mutlak atau menggunakan margin negatif.

Secara amnya, menggunakan reka letak fleksibel adalah lebih fleksibel dan lebih ringkas, tetapi ia memerlukan penggunaan CSS3 dan menggunakan atribut kedudukan lebih serasi dengan penyemak imbas lama. Dalam aplikasi praktikal, kita boleh memilih kaedah yang hendak digunakan untuk memusatkan imej mengikut situasi.

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