Heim > Artikel > Web-Frontend > CSS如何实现图片上下垂直居中_html/css_WEB-ITnose
CSS如何实现图片上下垂直居中_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:561363Durchsuche
CSS如何实现图片上下垂直居中:
在很多时候需要将图片上下垂直居中，不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重，下面就简单介绍一下其中的两种。
方法一:
使用margin方式，使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/2。
代码实例如下:
<!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> 方式二:
代码实例如下:
<!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> 以上代码实现了图片上下垂直居中，不过IE7浏览器并不支持此方式。
实现方式在div中添加了如下代码:
vertical-align:middle;display:table-cell;line-height:400px;
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/593.html
最原始地址是:http://www.softwhy.com/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：animation之objectAnimator_html/css_WEB-ITnoseNächster Artikel：CSS3 变形记_html/css_WEB-ITnose