Heim > Artikel > Web-Frontend > So legen Sie das IMG-Center in CSS fest
In CSS können Sie ein Bild zentrieren, indem Sie: Textausrichtungseigenschaften verwenden: Legen Sie das Bild als Blockelement fest und legen Sie automatische linke und rechte Ränder fest. Flexbox-Layout verwenden: Platzieren Sie das Bild in einem Flexbox-Container und legen Sie die horizontalen und vertikalen Zentrierungseigenschaften fest. Verwenden Sie ein Rasterlayout: Platzieren Sie das Bild in einem Rastercontainer und legen Sie sowohl die horizontalen als auch die vertikalen Mitteneigenschaften fest. Absolute Positionierung verwenden: Entfernen Sie das Bild aus dem normalen Fluss, zentrieren Sie es horizontal und zentrieren Sie es vertikal mit einer Transformation.
So zentrieren Sie ein Bild in CSS
In CSS gibt es viele Möglichkeiten, ein Bild zu zentrieren:
Verwenden Sie das Textausrichtungsattribut
<code class="css">img { display: block; margin: 0 auto; }</code>
display: block Code > Machen Sie das Bild zu einem Blockelement. <code>display: block
使图像成为一个块元素。margin: 0 auto
自动设置图像的左右外边距,使其在父元素中水平居中。使用 flexbox 布局
<code class="css">.container { display: flex; justify-content: center; align-items: center; } img { width: 100px; height: 100px; }</code>
.container
)。justify-content: center
将子元素(图像)在水平方向上居中。align-items: center
将子元素在垂直方向上居中。使用网格布局
<code class="css">.container { display: grid; place-items: center; } img { width: 100px; height: 100px; }</code>
.container
)。place-items: center
将子元素(图像)同时在水平和垂直方向上居中。使用绝对定位
<code class="css">img { position: absolute; left: 50%; transform: translate(-50%, -50%); }</code>
left: 50%
将图像水平居中,但它将相对于其父元素的左边界居中。transform: translate(-50%, -50%)
margin: 0 auto
Legt automatisch den linken und rechten Rand des Bildes fest, sodass es horizontal innerhalb des übergeordneten Elements zentriert ist. .container
) mit dem Flexbox-Layout🎜🎜rrreee🎜🎜. 🎜🎜justify-content: center
Zentriert das untergeordnete Element (Bild) horizontal. 🎜🎜align-items: center
Zentriert untergeordnete Elemente vertikal. 🎜🎜🎜🎜Erstellen Sie einen Rastercontainer (.container
) mit Rasterlayout🎜🎜rrreee🎜🎜. 🎜🎜place-items: center
Zentriert untergeordnete Elemente (Bilder) sowohl horizontal als auch vertikal. 🎜🎜🎜🎜Absolute Positionierung verwenden🎜🎜rrreee🎜🎜Absolute Positionierung verwenden, um ein Bild aus seinem normalen Fluss zu entfernen. 🎜🎜left: 50%
Zentriert das Bild horizontal, aber es wird relativ zum linken Rand seines übergeordneten Elements zentriert. 🎜🎜transform: translator(-50%, -50%)
Verschiebt das Bild um 50 % seiner eigenen Breite und Höhe nach links und oben und zentriert es innerhalb des übergeordneten Elements. 🎜🎜Das obige ist der detaillierte Inhalt vonSo legen Sie das IMG-Center in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!