Terokai cara memusatkan imej dengan CSS

Dalam reka bentuk web, imej biasanya merupakan bahagian penting, dan apabila imej tidak memenuhi spesifikasi reka bentuk atau tidak dipusatkan, ia mungkin memusnahkan reka letak dan estetika keseluruhan tapak web. Oleh itu, cara untuk memusatkan imej telah menjadi isu yang perlu diberi perhatian. Terdapat pelbagai kaedah yang tersedia dalam CSS untuk memusatkan imej secara mendatar dan menegak. Dalam artikel ini, kita akan melihat cara untuk memusatkan imej dengan CSS.

1. Pemusatan mendatar

1. margin:auto

Menggunakan margin:auto ialah kaedah yang mudah dan biasa, yang boleh memusatkan imej secara mendatar . Kaedah ini menetapkan nilai kiri dan kanan atribut margin kepada auto (margin: 0 auto;), yang boleh memusatkan elemen secara mendatar dalam bekasnya dan sesuai untuk satu imej.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  margin: 0 auto;
}

Gunakan margin:auto untuk mencapai pemusatan mendatar Di sini kami menetapkan jidar kiri dan kanan pembalut bekas kepada auto:

Kod berikut:

img {  
  display: block;
  margin: 0 auto;
}

Mencapai pemusatan mendatar dengan menetapkan margin imej kepada 0 automatik.

2. text-align:center

Kita boleh menggunakan text-align:center untuk memusatkan imej dan elemen sebaris lain secara mendatar, tetapi ketahui bahawa kaedah ini hanya berfungsi Untuk kes di mana imej diletakkan di dalam bekas.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  width: 300px;
  text-align: center;
}

Dengan menetapkan penjajaran teks pembalut bekas ke tengah, imej yang disertakan dipusatkan secara mendatar.

3. kedudukan:mutlak dan kiri:50%

Menggunakan atribut ini, kami menetapkan gaya imej kepada kedudukan:mutlak dan kiri:50% untuk membuat imej Berpusat mendatar. Seterusnya, kita perlu menetapkan margin kiri (margin-kiri) imej kepada separuh lebar imej itu sendiri (lebar/2) Kaedah ini sesuai untuk situasi di mana kita hanya perlu memusatkan imej secara mendatar dan tidak peduli tentang ketinggian imej.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

img {
  position: absolute;
  left: 50%;
  margin-left: -150px;
}

Tentukan kedudukan imej dengan menetapkan kedudukan imej kepada mutlak, kiri:50%, dan kemudian tetapkan margin-kiri kepada nombor negatif berdasarkan lebar sebenar imej untuk memusatkan imej secara mendatar.

2. Pemusatan menegak

1. tinggi garis

Apabila ketinggian imej sama dengan ketinggian garisan elemen, kita boleh letakkan imej dalam bekas Berpusat secara menegak. Kaedah ini sesuai untuk situasi di mana hanya terdapat satu baris teks.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
  <p>只有单行文本</p>
</div>

.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

Pusat imej secara menegak dengan menetapkan ketinggian dan ketinggian garisan bekas kepada nilai yang sama.

2. display:flex and align-item:center

Gunakan paparan:flex dan align-item:tengah ke tengah imej dan elemen lain secara menegak dalam bekas. Kaedah ini sesuai untuk situasi di mana terdapat berbilang elemen berpusat menegak (seperti dua gambar) dalam bekas.

Kod berikut:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Dengan menetapkan atribut paparan bekas untuk melentur, dan menggunakan atribut align-item:center dan justify-content:center, imej diletakkan di dalam bekas Pusat secara mendatar dan menegak.

3. kedudukan:mutlak dan atas:50%

Dengan atribut position:mutlak dan atas:50%, kita boleh memusatkan imej secara menegak. Seterusnya, tetapkan margin atas kepada separuh ketinggian imej itu sendiri.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

Dengan menetapkan kedudukan imej kepada mutlak, kedudukan: relatif ketinggian bekas pembalut ditetapkan kepada 200px. Kemudian tetapkan bahagian atas imej kepada 50% untuk memusatkan imej secara menegak, dan tetapkan bahagian atas jidar kepada separuh ketinggian imej untuk mencapai pemusatan menegak.

3. Pemusatan mendatar dan menegak

Jika kita perlu memusatkan imej secara mendatar dan menegak, kita boleh menggunakan kombinasi kaedah di atas.

1. kedudukan:mutlak, atas:50% dan kiri:50%

Kaedah ini ialah kaedah yang paling biasa digunakan, gunakan kedudukan:mutlak, atas:50% dan Atribut kiri:50% boleh mencapai pemusatan mendatar dan menegak serentak. Kaedah ini berfungsi apabila anda hanya perlu memusatkan imej.

Kod berikut:

<div class="wrapper">
  <img src="image.jpg" alt="示例图片">
</div>

.wrapper {
  position: relative;
  height: 200px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Dengan menetapkan kedudukan dan sifat atas dan kiri imej kepada 50%, capai pemusatan mendatar dan menegak. Seterusnya, gunakan sifat transformasi untuk mengalihkan imej separuh lebar dan tinggi ke kiri atas (iaitu terjemah(-50%,-50%)).

2. Menggunakan paparan: flex dan justify-content and align-item

Menggunakan paparan: flex, justify-content dan align-item atribut, kita boleh membuat berbilang imej Juga berpusat secara mendatar dan menegak. Kaedah ini sesuai untuk situasi di mana berbilang imej berada dalam baris yang sama dan perlu dipusatkan pada halaman web pada masa yang sama.

Kod berikut:

<div class="wrapper">
  <img src="image1.jpg" alt="示例图片1">
  <img src="image2.jpg" alt="示例图片2">
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 200px;
}
img {
  margin: 5px;
}

Dengan menetapkan paparan bekas untuk melentur dan menggunakan sifat justify-content dan align-item, imej boleh dipusatkan secara mendatar dan secara menegak pada masa yang sama.

Kesimpulan

Memusatkan imej adalah salah satu teknik yang sering digunakan dalam reka bentuk web. Apabila kita mempunyai berbilang imej yang perlu dipusatkan pada halaman, kita mesti memilih kaedah pemusatan yang sesuai. Pemusatan mendatar boleh dicapai menggunakan ciri jidar , penjajaran teks dan kedudukan, pemusatan menegak boleh dicapai menggunakan ciri ketinggian garis , paparan dan kedudukan, dan pemusatan mendatar dan menegak juga boleh dicapai menggunakan gabungan sifat ini. Oleh itu, memilih kaedah pemusatan imej yang sesuai dalam reka bentuk web boleh membantu kami mencipta pengalaman pengguna yang lebih baik dan gaya reka bentuk yang lebih baik.

Atas ialah kandungan terperinci Terokai cara memusatkan imej dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!