Maison > Article > interface Web > 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;
居中。
注意事项:
div
元素必须足够宽以容纳图片。margin: 0 auto;
仅对块状元素有效。因此,如果图片不是块状元素(例如 inline
元素),则需要将其转换为块状元素(例如,使用 display: block;
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 : 🎜🎜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!