CSS-Bildzentrierungsmethode: Verwenden Sie das Randattribut, um den oberen, unteren, linken und rechten Rand des Bildes festzulegen und das Bild zu zentrieren. Verwenden Sie das text-align-Attribut, um den Containertext zu zentrieren, und verwenden Sie display: block; und margin: 0 auto, um das Bild in ein Blockelement umzuwandeln und es zu zentrieren.
CSS-Bildzentrierungscode
Um das Bild auf der Webseite zu zentrieren, können Sie die Eigenschaften margin und text-align in verwenden CSS. margin 和 text-align 属性。
方法 1：使用 margin 属性
使用 margin 属性，可以设置图片上下左右的边距，从而使其居中。
<code class="css">img {
margin: 0 auto;
}</code>方法 2：使用 text-align 属性
text-align 属性可以设置文本的水平对齐方式，也可以将其应用于图片。
<code class="css">div {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}</code>在第二个方法中，div 元素设置了文本居中，而 img 元素使用 display: block; 将自身转换为块状元素，然后使用 margin: 0 auto; 居中。
注意事项：
div 元素必须足够宽以容纳图片。margin: 0 auto; 仅对块状元素有效。因此，如果图片不是块状元素（例如 inline 元素），则需要将其转换为块状元素（例如，使用 display: block;
margin-Attribut können Sie den oberen, unteren, linken und rechten Rand des Bildes festlegen, um es zu zentrieren. 🎜rrreee🎜🎜Methode 2: Verwenden Sie das text-align-Attribut 🎜🎜🎜text-align Das Attribut kann die horizontale Ausrichtung von Text festlegen und kann auch auf Bilder angewendet werden. 🎜rrreee🎜Bei der zweiten Methode legt das div-Element fest, dass der Text zentriert wird, und das img-Element verwendet display: block; zum Konvertieren selbst, um das Element zu blockieren, und verwenden Sie dann margin: 0 auto;, um es zu zentrieren. 🎜🎜🎜Hinweis: 🎜🎜div-Element breit genug sein, um das Bild aufzunehmen. 🎜margin: 0 auto; Nur gültig für Blockelemente. Wenn das Bild also kein Blockelement ist (z. B. ein inline-Element), muss es in ein Blockelement konvertiert werden (z. B. mit display: block;). . 🎜🎜Das obige ist der detaillierte Inhalt vonSo schreiben Sie CSS-Bildzentrierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
