Analisis ringkas beberapa kaedah menetapkan imej berpusat dalam css

Dalam reka bentuk web, gambar merupakan elemen yang sangat penting dan sering digunakan sebagai bahagian penting dalam reka letak halaman. Jadi, apabila menetapkan kedudukan paparan imej, bagaimana untuk mencapai paparan berpusat imej melalui CSS? Artikel ini akan memperkenalkan anda kepada kaedah menetapkan imej berpusat dalam CSS.

1. Tetapkan imej latar belakang dalam div

Melalui imej latar belakang, kita boleh mencapai tetapan latar belakang imej yang paling mudah. Pertama, dalam HTML, kami mentakrifkan elemen div dan menetapkan ID unik untuknya:

<div></div>

Kemudian, dalam CSS, kami menggunakan kod berikut untuk menetapkan imej latar belakang dan menetapkan atribut kedudukan latar belakang ialah tengah, anda boleh mencapai paparan berpusat:

#img_div {
  background-image: url("image.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Antaranya, atribut saiz latar belakang ditetapkan pada penutup untuk memastikan imej boleh diskalakan secara berkadar dengan lebar dan ketinggian yang sama seperti bekas apabila dipaparkan.

2. Gunakan kedudukan dan jidar untuk memusatkan imej

Untuk elemen imej itu sendiri, kita boleh mencapai paparan berpusat dengan menetapkan atribut kedudukan dan atribut marginnya. Mula-mula, dalam HTML, kita mentakrifkan elemen img dan menetapkan ID unik:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Analisis ringkas beberapa kaedah menetapkan imej berpusat dalam css" >

Kemudian, dalam CSS, kita boleh menetapkan kedudukannya kepada mutlak, dan kemudian melaraskan nilai marginnya, iaitu Paparan berpusat boleh dicapai:

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

Antaranya, tetapkan atribut kiri dan atas kepada 50% untuk meletakkan elemen ke tengah bekas induk, dan fungsi translate() atribut transform boleh menggerakkan elemen kepada dirinya Separuh lebar dan tinggi untuk mencapai paparan berpusat.

3. Gunakan susun atur fleksibel untuk memusatkan imej

Susun atur fleksibel ialah salah satu ciri penting dalam CSS3, yang boleh melaksanakan reka letak elemen dengan mudah. Antaranya, anda boleh mencapai penjajaran tengah mendatar dan menegak bagi elemen kanak-kanak dalam bekas dengan menetapkan sifat justify-content dan align-item bagi bekas fleksibel. Seterusnya, mari kita lihat cara untuk memusatkan imej.

Pertama, dalam HTML, kami mentakrifkan elemen div dan menetapkan ID unik:

  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Analisis ringkas beberapa kaedah menetapkan imej berpusat dalam css" >

Kemudian, dalam CSS, kami menetapkan elemen div sebagai bekas flex dan Tetapkan justify -kandungan dan menjajarkan atribut item ke tengah untuk memaparkan imej di tengah:

#img_div {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

Dengan cara ini, selepas menetapkan atribut elemen div ini di mana imej terletak, img sub-elemennya boleh dipusatkan secara automatik.

Ringkasan

Di atas ialah beberapa cara untuk menetapkan imej berpusat dalam CSS. Antaranya, kaedah menggunakan imej latar belakang dan kedudukan + margin adalah agak mudah, manakala menggunakan susun atur fleksibel boleh mengendalikan susun atur elemen kanak-kanak dengan lebih mudah. Kaedah yang berbeza sesuai untuk senario yang berbeza Pembangun boleh memilih kaedah yang sesuai dengan mereka mengikut situasi sebenar dan menggunakannya secara fleksibel.

Atas ialah kandungan terperinci Analisis ringkas beberapa kaedah menetapkan imej berpusat dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!