Home Web Front-end Front-end Q&A How to center pictures in html

How to center pictures in html

May 16, 2023 am 10:37 AM

HTML (Hypertext Markup Language) is one of the basic languages ​​for creating Web pages. In web interface design, images are often used, so how to center images in HTML?

The following are 3 methods, implemented using CSS, HTML tables, and HTML5 tags respectively.

Method 1: Use CSS to center the image

You can use the margin property of CSS to center the image vertically and horizontally.

Steps:

  1. Insert an image in HTML:
<img src="图片路径" alt="图片描述">
Copy after login
  1. Set the style of the img element in the CSS file
img {
  display: block;
  margin: 0 auto;
}
Copy after login

Explanation:

  • display: block; Convert the image to a block-level element so that it can be centered horizontally.
  • margin: 0 auto; is used to set the margins of the image. If the left and right margins are set to auto, the image will be horizontally centered in its container.

Method 2: Use HTML table to center the image

You can use the HTML table element and align attribute to achieve vertical and horizontal centering of the image.

Steps:

  1. Create a table in HTML:
<img src="图片路径" alt="图片描述">
Copy after login
  1. The align attribute of the table is set to "center":
<img src="图片路径" alt="图片描述">
Copy after login

Explanation:

  • The align attribute in the element is used to set the vertical and horizontal alignment of its internal content.
  • If you add an image to a element nested in a element with the align attribute set to "center", then the element will be displayed in the center.

    Method 3: Use HTML5 tags to center the image

    HTML5 introduces some new semantic tags, such as

    ,
    ,