Div图片垂直居中的方法
Div图片垂直居中的方法, 纯粹的记录一下而已, 方便以后的使用, 代码如下:
CSS语言:
<style>
.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;
}
</style>
.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;
}
</style>
html：
HTML语言:
<div class="box"><a href="http://www.howpm.com" target="_blank"><img src='/index/thumb.png' data-original="http://www.google.com.hk/images/srpr/nav_logo27.png" /></a></div>
赏
转载本站原创文章请注明：文章转自 挨踢路，链接: https://itlu.net/articles/1481.html
像我的博客的评论textarea里的图片就用到了垂直和水平居中，但在IE6里，无效，哈哈。
这个是可以兼容IE6,如果不是为了兼容,也不用这么麻烦