How to center the image in css

How to center the image in css: 1. Use the "margin:0 auto" or "text-align:center" style to center the image horizontally; 2. Use "height == row height" to center the image vertically ; 3. Use table to vertically center the picture; 4. Use absolute positioning to vertically center the picture.

##The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

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 it to you. Regarding how to use css to center pictures on web pages, it 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 of text text-align: center to achieve The image is horizontally centered

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>

(Learning video sharing:

css video tutorial

)

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

1. Use height == row height to achieve vertical centering of images

#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 method makes use of the vertical centering attribute of the table.

Note: Display: table; and display: table-cell; are used here to simulate the table. This method is not compatible with IE6/IE7. IE67 does not support display: table. If you do not 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>

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

For more programming related knowledge, please visit:

Programming Video

! !

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