Maison > interface Web > tutoriel CSS > le corps du texte

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

下次还敢
Libérer: 2024-04-25 12:21:12
original
1173 Les gens l'ont consulté

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.

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

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. margintext-align属性来实现图片水平居中。

1. 使用margin属性

<code class="css">img {
  margin: 0 auto;
}</code>
Copier après la connexion

margin属性设置图片元素的上下左右外边距。通过设置margin: 0 auto;,将左右外边距设置为auto,这意味着浏览器会自动根据容器的宽度计算左右外边距,从而实现图片水平居中。

2. 使用text-align属性

<code class="css">.container {
  text-align: center;
}
img {
  display: inline-block;
}</code>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal