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 the

margin attribute, you can set the top, bottom, left and right margins of the image to center it.

img {
  margin: 0 auto;
}

Method 2: Use the text-align attribute

text-align The attribute can set the horizontal alignment of the text or apply it in pictures.

div {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

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:

For method 1, if the image width is larger than the container width, it may not be centered.
• For method 2, the
• div element must be wide enough to accommodate the image.
• margin: 0 auto; 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!