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

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

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!