Home > Article > Web Front-end > How to write css image centering code
CSS image centering method: Use the margin attribute to set the top, bottom, left and right margins of the image, and center the image. Use the text-align attribute to center the container text, and use display: block; and margin: 0 auto; to convert the image to a block element and center it.
CSS image centering code
In order to center the image on the web page, you can use ## in CSS #margin and
text-align properties.
Method 1: Use the margin attribute
Using themargin attribute, you can set the top, bottom, left and right margins of the image to center it.
<code class="css">img { margin: 0 auto; }</code>
Method 2: Use the text-align attribute
text-align The attribute can set the horizontal alignment of the text or apply it in pictures.
<code class="css">div { text-align: center; } img { display: block; margin: 0 auto; }</code>In the second method, the
div element sets the text to be centered, and the
img element transforms itself using
display: block; For block elements, then use
margin: 0 auto; to center it.
Note:
element must be wide enough to accommodate the image.
Only valid for block elements. Therefore, if the image is not a block element (e.g. an
inline element), it needs to be converted to a block element (e.g. using
display: block;).
The above is the detailed content of How to write css image centering code. For more information, please follow other related articles on the PHP Chinese website!