So schreiben Sie den Code, um das Bild in CSS zu zentrieren

Sie können den folgenden Code in CSS verwenden, um das Bild horizontal zu zentrieren: Legen Sie das Containerelement text-align: center; fest. Legen Sie das Bild als Inline-Elementanzeige auf Blockebene fest: inline-block;. Zentrieren Sie das Bild vertikal. Vertical-align: middle;. Zentrieren Sie das Bild vertikal: Stellen Sie das Containerelement auf Flexbox-Anzeige ein: flex;. Untergeordnete Elemente vertikal zentrieren align-items: center;. Untergeordnete Elemente horizontal zentrieren justify-content: center;. Begrenzen Sie die Bildgröße auf max. Breite: 100 %, maximale Höhe:

Code zum Zentrieren von Bildern in CSS

Frage: Wie verwende ich CSS-Code, um Bilder horizontal und vertikal in Elementen zu zentrieren?

Antwort:

Horizontale Mitte

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

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

Vertikale Mitte

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

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

Details:

Horizontale Mitte

• text-align: center; code> wird Das <code>image-container-Element ist so eingestellt, dass es horizontal zentriert ist. 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; Macht das image-Element zu einem Inline-Element auf Blockebene, sodass es am Text ausgerichtet werden kann.

🎜vertical-align: middle; Zentriert das image-Element vertikal und richtet es am umgebenden Text aus. 🎜🎜🎜🎜Vertikal zentriert🎜🎜🎜🎜display: flex; Setzen Sie das image-container-Element auf Flexbox, um ein flexibles Layout seiner untergeordneten Elemente zu ermöglichen. 🎜🎜align-items: center; Zentriert alle untergeordneten Elemente im image-container-Element vertikal. 🎜🎜justify-content: center; Zentriert alle untergeordneten Elemente im image-container-Element horizontal. 🎜🎜max-width: 100%; und max-height: 100%; begrenzen die Größe des image-Elements so, dass es hineinpasst Die Größe des image-container-Elements unter Beibehaltung des Seitenverhältnisses. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo schreiben Sie den Code, um das Bild in CSS zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!