How to center the image in css? Summary of methods for centering css images

When laying out a web page, sometimes the position of the picture may affect the beauty of the entire page, so the placement of the picture must be changed. Then, the following article will introduce to you about the placement of pictures. How to use css to achieve centering on a web page can be a reference for friends in need.

Css image centering can be divided into two situations: horizontal centering and vertical centering of css images. So let’s take a look at the implementation methods of these image centerings respectively.

1. First, let’s take a look at the method of horizontally centering CSS images

1. Use margin: 0 auto to achieve horizontal centering of images

css image horizontal centering code:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="margin: 0 auto;" />
</div>

2. Use the horizontal centering attribute text-align: center of the text to achieve horizontal centering of the image

css image horizontal centering code:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</div>

2. Let’s take a look at how to implement vertical centering of css images

1. Use height == row height to achieve The image is vertically centered

The css image vertical centering code is as follows:

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block; vertical-align: middle;" />
</div>

Note: This method needs to indicate the height before it can be used.

2. Use table to achieve vertical centering of images

css image vertical centering code is as follows:

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">   
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="display: inline-block;" />
</span>
</div>

Note: This The method is to use the vertical centering attribute of the table

Explanation: display: table; and display: table-cell; are used here to simulate the table. This method is not compatible with IE6/IE7, and IE67 does not support display: table , if you don’t need to support IE67, you can use it

This method has a disadvantage: when you set display: table; it may change your original layout

3. Use absolute Positioning to achieve vertical centering of images

css image vertical centering code is as follows:

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="http://img0.imgtn.bdimg.com/it/u=1768770686,623173162&fm=26&gp=0.jpg" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

Note: This method can be used if the width and height of the image are known.

This article ends here. For details on the above properties, please refer to css User Manual.

The above is the detailed content of How to center the image in css? Summary of methods for centering css images. For more information, please follow other related articles on the PHP Chinese website!