Bagaimana untuk memusatkan imej secara menegak dalam css

Terdapat pelbagai cara untuk memusatkan imej secara menegak dalam CSS: gunakan flexbox untuk menetapkan bekas induk kepada flexbox dan tengahkan imej melalui align-item: center. Gunakan ubah untuk menetapkan sifat translateY imej kepada -50%, naikkan 50% dan tengahkannya. Tetapkan jidar atas dan bawah imej kepada auto supaya ia dipusatkan secara automatik berbanding dengan elemen induk.

Pusat imej secara menegak dalam CSS

Dalam CSS, terdapat beberapa cara untuk memusatkan imej secara menegak. Kaedah yang paling biasa digunakan termasuk:

1 flexbox

Menggunakan flexbox, anda boleh menetapkan bekas kepada flexbox dan mempunyai imej sebagai elemen anak langsung. Anda kemudiannya boleh memusatkan elemen anak secara menegak (termasuk imej) menggunakan atribut align-items: center;. align-items: center; 属性将子元素（包括图像）垂直居中。

<code class="css">.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image {
  max-width: 100%;
  height: auto;
}</code>

2. transform

transform 允许应用转换到元素，包括垂直平移。通过将图像的 transform 属性设置为 translateY(-50%)，可以将其向上移动 50%，从而使其垂直居中。

<code class="css">.image {
  max-width: 100%;
  height: auto;
  transform: translateY(-50%);
}</code>

3. margin

在某些情况下，可以使用 margin 属性来垂直居中图像。为此，需要设置图像的顶部和底部 margin 为 auto

<code class="css">.image {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}</code>

2. transform

transform membolehkan menerapkan transformasi pada elemen, termasuk terjemahan menegak. Dengan menetapkan sifat transform imej kepada translateY(-50%), anda boleh menaikkannya 50%, memusatkannya secara menegak.

rrreee

3. jidar
• Dalam sesetengah kes, anda boleh menggunakan sifat jidar untuk memusatkan imej secara menegak. Untuk melakukan ini, tetapkan margin atas dan bawah imej kepada auto.
rrreee
• Pilih kaedah terbaik

🎜🎜Memilih kaedah yang paling sesuai untuk situasi anda bergantung pada susun atur dan keperluan khusus anda. Berikut adalah beberapa garis panduan: 🎜🎜🎜Jika imej berada dalam bekas flexbox, flexbox adalah cara yang mudah dan berkesan untuk melakukannya. 🎜🎜 transform ialah pilihan yang baik jika imej tidak berada di dalam bekas flexbox dan anda ingin menggunakan transformasi tambahan padanya. 🎜🎜Jika imej mempunyai lebar tetap berbanding elemen induk, margin ialah pilihan yang mudah. 🎜🎜

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