Home  >  Article  >  Web Front-end  >  How to vertically center images up and down with CSS_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:40:561363browse

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>

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>

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;

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn