Bagaimana untuk menulis kod untuk memusatkan imej dalam css

Anda boleh menggunakan kod berikut dalam CSS untuk memusatkan imej secara mendatar: Tetapkan elemen kontena text-align: center;. Tetapkan imej sebagai paparan elemen peringkat blok sebaris: blok sebaris;. Tengahkan imej secara menegak-sejajarkan: tengah;. Tengahkan imej secara menegak: Tetapkan elemen bekas kepada paparan kotak flex: flex;. Pusat elemen anak sejajarkan secara menegak-item: tengah;. Pusat elemen kanak-kanak secara mendatar justify-content: center;. Hadkan lebar maksimum saiz imej: 100%;, ketinggian maksimum:

Kod untuk memusatkan imej dalam CSS

Soalan: Bagaimana untuk menggunakan kod CSS secara mendatar dan menegak dalam elemen mendatar?

Jawapan:

Pusat mendatar

.image-container {
  text-align: center;
}

.image {
  display: inline-block;
  vertical-align: middle;
}

Pusat menegak

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

.image {
  max-width: 100%;
  max-height: 100%;
}

Butiran:

• text-align: center; code> akan The Elemen <code>bekas imej ditetapkan untuk dipusatkan secara mendatar. text-align: center; 将 image-container 元素设置为水平居中。
• display: inline-block; 将 image 元素设为内联块级元素，允许它与文本对齐。
• vertical-align: middle; 将 image 元素在垂直方向上居中，与 surrounding text 对齐。

垂直居中

• display: flex; 将 image-container 元素设为 flexbox，允许对其子元素进行灵活布局。
• align-items: center; 将 image-container 元素中的所有子元素在垂直方向上居中。
• justify-content: center; 将 image-container 元素中的所有子元素在水平方向上居中。
• max-width: 100%; 和 max-height: 100%; 限制 image 元素的大小，使其适应 image-container
display: inline-block; Menjadikan elemen imej sebagai elemen peringkat blok sebaris, membolehkan ia diselaraskan dengan teks.

🎜vertical-align: middle; Memusatkan elemen image secara menegak dan menjajarkannya dengan teks sekeliling. . 🎜🎜align-item: center; Memusatkan semua elemen anak dalam elemen image-container secara menegak. 🎜🎜justify-content: center; Memusatkan semua elemen anak dalam elemen image-container secara mendatar. 🎜🎜lebar maks: 100%; dan tinggi maks: 100%; mengehadkan saiz elemen imej supaya ia muat dalam Saiz elemen bekas imej sambil mengekalkan nisbah bidang. 🎜🎜

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