Quels attributs peuvent être utilisés en CSS pour centrer l'image horizontalement ?

Le centrage horizontal des images peut être obtenu grâce aux propriétés CSS margin ou text-align. 1. Utilisez margin: 0 auto ; pour définir les marges gauche et droite à calculer automatiquement pour réaliser le centrage. 2. Définissez le conteneur text-align: center; et l'élément d'image display: inline-block; pour le centrer en tant qu'élément de bloc en ligne.

Attributs CSS pour obtenir un centrage horizontal des images

En CSS, vous pouvez obtenir un centrage horizontal des images en définissant la marge ou le text-align les attributs. 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. Utilisez l'attribut margin🎜🎜rrreee🎜margin pour définir les marges supérieure, inférieure, gauche et droite de l'élément d'image. En définissant margin: 0 auto;, les marges gauche et droite sont définies sur auto, ce qui signifie que le navigateur calculera automatiquement les marges gauche et droite en fonction de la largeur de le conteneur pour obtenir une image horizontale centrée. 🎜🎜🎜2. Utilisez l'attribut text-align🎜🎜rrreee🎜text-align pour définir l'alignement du texte des éléments dans le conteneur. Définissez l'alignement du texte du conteneur au centre en définissant .container { text-align: center }. Ensuite, définissez l'élément d'image sur display: inline-block; pour en faire un élément de bloc en ligne, centrant ainsi l'image horizontalement. 🎜

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!