Heim > Artikel > Web-Frontend > So richten Sie Bilder in CSS horizontal und zentriert aus
Frage: Wie erreicht man eine horizontale Zentrierung von Bildern in CSS? Methode: Verwenden Sie das Attribut „margin: auto;“, um den linken und rechten Rand gleich einzustellen, um eine horizontale Zentrierung zu erreichen. Legen Sie die Bildbreite fest und geben Sie die Bildgröße an. Legen Sie das Bildanzeigeattribut auf das Blockelement fest, um das Bild horizontal zu zentrieren.
So erreichen Sie eine horizontale Zentrierung von Bildern in CSS
Methode:
Verwenden Sie das Attribut margin: auto;
. Diese Eigenschaft legt automatisch horizontale und vertikale Ränder für das Element fest und zentriert es somit horizontal. margin: auto;
属性。此属性将自动为元素设置水平和垂直边距,从而对其进行水平居中对齐。
详细说明:
img
margin: auto;
属性应用于所选图片元素。这将自动设置元素的左右边距为相等的值,从而实现水平居中。width
属性设置宽度。display
属性设置为 block
元素,以便它能够水平居中。否则,图片将以内联元素显示,无法水平居中。示例代码:
<code class="css">img { width: 200px; display: block; margin: auto; }</code>
其他方法:
text-align: center;
属性:此属性通常用于文本对齐,但也可以用于水平居中图片。将 text-align
属性应用于图片元素的父元素并为图片设置 display: inline-block;
。float: left
和 float: right
属性:此方法不适用于需要精确居中的情况,但可以将图片大致居中。将 float: left;
应用于图片元素,并将 float: right;
img
🎜margin: auto;
attribute to the selected image element. Dadurch werden die linken und rechten Ränder des Elements automatisch auf gleiche Werte gesetzt und es somit horizontal zentriert. 🎜width
festgelegt werden. 🎜display
-Attribut des Bildes auf das block
-Element, damit es horizontal zentriert werden kann. Andernfalls wird das Bild als Inline-Element angezeigt und kann nicht horizontal zentriert werden. 🎜text-align: center;
: 🎜Dieses Attribut wird normalerweise für verwendet Textausrichtung, kann aber auch zum horizontalen Zentrieren von Bildern verwendet werden. Wenden Sie das Attribut text-align
auf das übergeordnete Element des Bildelements an und legen Sie display: inline-block;
für das Bild fest. 🎜float: left
und float: right
: 🎜Diese Methode eignet sich nicht für Situationen, in denen eine genaue Zentrierung erforderlich ist, kann aber grob zentriert werden Bild. Wenden Sie float: left;
auf das Bildelement und float: right;
auf die nachfolgenden Elemente des Bildelements an. 🎜🎜Das obige ist der detaillierte Inhalt vonSo richten Sie Bilder in CSS horizontal und zentriert aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!