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
- 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/