Welche Attribute können in CSS verwendet werden, um das Bild horizontal zu zentrieren?

Die horizontale Zentrierung von Bildern kann durch die CSS-Eigenschaften „margin“ oder „text-align“ erreicht werden. 1. Verwenden Sie margin: 0 auto; um den linken und rechten Rand so einzustellen, dass er automatisch berechnet wird, um eine Zentrierung zu erreichen. 2. Stellen Sie den Container text-align: center; und das Bildelement display: inline-block; ein, um ihn als Inline-Blockelement zu zentrieren.

CSS-Attribute zum Erreichen einer horizontalen Zentrierung von Bildern

In CSS können Sie eine horizontale Zentrierung von Bildern erreichen, indem Sie margin oder text-align festlegen Attribute. margin或text-align属性来实现图片水平居中。

1. 使用margin属性

<code class="css">img {
  margin: 0 auto;
}</code>

margin属性设置图片元素的上下左右外边距。通过设置margin: 0 auto;，将左右外边距设置为auto，这意味着浏览器会自动根据容器的宽度计算左右外边距，从而实现图片水平居中。

2. 使用text-align属性

<code class="css">.container {
  text-align: center;
}
img {
  display: inline-block;
}</code>

text-align属性设置容器内元素的文本对齐方式。通过设置.container { text-align: center; }，将容器的文本对齐方式设置为居中。再将图片元素设置为display: inline-block;

🎜1. Verwenden Sie das Randattribut🎜🎜rrreee🎜margin, um den oberen, unteren, linken und rechten Rand des Bildelements festzulegen. Durch die Einstellung von margin: 0 auto; werden die linken und rechten Ränder auf auto gesetzt, was bedeutet, dass der Browser den linken und rechten Rand automatisch basierend auf der Breite von berechnet den Container, um ein horizontales Bild zu erzielen. 🎜🎜🎜2. Verwenden Sie das text-align-Attribut🎜🎜rrreee🎜text-align-Attribut, um die Textausrichtung von Elementen innerhalb des Containers festzulegen. Stellen Sie die Textausrichtung des Containers auf zentriert ein, indem Sie .container { text-align: center; festlegen. Setzen Sie dann das Bildelement auf display: inline-block;, um es zu einem Inline-Blockelement zu machen und dadurch das Bild horizontal zu zentrieren. 🎜

Das obige ist der detaillierte Inhalt vonWelche Attribute können in CSS verwendet werden, um das Bild horizontal zu zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!