Comment écrire du code de centrage d'image CSS

Méthode de centrage d'image CSS : utilisez l'attribut margin pour définir les marges supérieure, inférieure, gauche et droite de l'image et centrer l'image. Utilisez l'attribut text-align pour centrer le texte du conteneur et utilisez display: block; et margin: 0 auto pour convertir l'image en élément de bloc et la centrer.

Code de centrage d'image CSS

Afin de centrer l'image sur la page Web, vous pouvez utiliser les propriétés margin et text-align dans 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; 居中。

注意事项：

• 对于方法 1，如果图片宽度大于容器宽度，它可能不会居中。
• 对于方法 2，div 元素必须足够宽以容纳图片。
• margin: 0 auto; 仅对块状元素有效。因此，如果图片不是块状元素（例如 inline 元素），则需要将其转换为块状元素（例如，使用 display: block;

Méthode 1 : Utilisez l'attribut margin🎜🎜🎜À l'aide de l'attribut margin, vous pouvez définir les marges supérieure, inférieure, gauche et droite de l'image pour la centrer. 🎜rrreee🎜🎜Méthode 2 : Utilisez l'attribut text-align 🎜🎜🎜text-align L'attribut peut définir l'alignement horizontal du texte et peut également être appliqué aux images. 🎜rrreee🎜Dans la deuxième méthode, l'élément div définit le texte à centrer et l'élément img utilise display: block; pour convertir lui-même pour bloquer l'élément, puis utilisez margin: 0 auto; pour le centrer. 🎜🎜🎜Remarque : 🎜🎜

• Pour la méthode 1, si la largeur de l'image est plus grande que la largeur du conteneur, elle risque de ne pas être centrée. 🎜
• Pour la méthode 2, l'élément div doit être suffisamment large pour accueillir l'image. 🎜
• margin: 0 auto; Valable uniquement pour les éléments de bloc. Par conséquent, si l'image n'est pas un élément de bloc (par exemple, un élément inline), elle doit être convertie en un élément de bloc (par exemple, en utilisant display: block;). . 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!