How to center pictures in html

In web design, the use of images is becoming more and more common, but how to center the image on the page is a question that is often asked.

To display the image in the center of the web page, you need to use HTML and CSS code to achieve it. Next, let’s look at the specific steps.

1. Set images in HTML code

To add images to a web page, you need to use HTML code. We can use the following code to add a picture:

<img src="图片地址" alt="图片描述">

Among them, the src attribute represents the address of the picture, and the alt attribute represents the description of the picture. When the image cannot be displayed, the browser will display the content of the alt attribute.

In the code, we can use CSS styles to control the size and position of the image.

2. Use CSS code to set the width and height of the image

In the CSS code, we can use width and height Property to control the size of the image. For example:

img {
  width: 50%;
  height: auto;
}

This code will make the width of the image 50% of the page width, and the height will be automatically adjusted proportionally.

3. Use CSS code to set the alignment of the image

To make the image appear centered, you can use the text-align attribute to set the horizontal alignment of the image Way. For example:

body {
  text-align: center;
}

img {
  display: inline-block;
  margin: auto;
}

This code will center all elements on the page, then use the display attribute to set the image as an inline block-level element, and use marginproperty aligns the image vertically to the middle of the page.

Using these simple HTML and CSS codes, we can center the image on the web page. Of course, this is just one of the methods, and there are many other ways to achieve image alignment. However, this method is relatively simple and practical, suitable for novices to learn and use.

The above is the detailed content of How to center pictures in html. For more information, please follow other related articles on the PHP Chinese website!