How to vertically center images up and down with CSS_html/css

How to vertically center images up and down with CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:56

Original

1398 people have browsed it

How to vertically center images up and down with CSS:

In many cases, it is necessary to vertically center images up and down, but there is no straightforward property that can achieve this. Function. Of course, there are many ways to vertically center the image up and down. Let’s briefly introduce two of them.

Method 1:

Use the margin method to vertically center the image up and down in the div. The margin-top value is calculated as: div height/2-picture height/2.

The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div {  height:400px;  width:400px;  border:1px solid red;}div img {margin-top:127px;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="蚂蚁部落"></div></body></html>

Copy after login

Method 2:
The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div {  height:400px;  width:400px;  border:1px solid red;  vertical-align:middle;  display:table-cell;}</style></head><body><div><img src="mytest/demo/border.jpg" alt="蚂蚁部落" /></div></body></html>

Copy after login

The above code achieves vertical centering of the image up and down, but the IE7 browser does not support this method.
The implementation method is to add the following code in the div:

vertical-align:middle;display:table-cell;line-height:400px;

Copy after login

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0503/593. html

The original address is: http://www.softwhy.com/