图片垂直居中

最新推荐文章于 2023-07-25 10:52:04 发布

yzbczq

最新推荐文章于 2023-07-25 10:52:04 发布

阅读量96

点赞数

分类专栏：点滴文章标签： IE Chrome Safari CSS 浏览器

本文链接：https://blog.csdn.net/yzbczq/article/details/83522605

版权

点滴专栏收录该内容

16 篇文章 0 订阅

订阅专栏


.box {/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;/*设置水平居中*/
text-align:center;/* 针对IE的Hack */
*display: block;*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ 
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px;height:200px;border: 1px solid #eee; 
}
.box img {/*设置图片垂直居中*/
vertical-align:middle;
}

<div class="box">
    <img src="http://www.iteye.com/upload/logo/user/182238/9fbe4e47-8e32-3b8f-ad11-95c46a1d4b25.jpg?1261106665" border="0" />
</div>

IE6,Safari,Chrome,通不过.