首页 > 代码库 > 图片垂直居中的问题
图片垂直居中的问题
经常遇到图片垂直居中的问题,图片是个置换元素,有些特殊的特性。刚开始没掌握规律,浪费很多时间去调整。
网上看到不错的方法,自己在这里总结一下。
html 代码结构<div class="box><img src="http://www.mamicode.com/images/pic.jpg"></div>
css 代码结构
.box{
display:table-cell;
vertical-align:middle;
/* 针对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;
}
图片垂直居中的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。