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>

html:

HTML语言:
<div class="box"><a href="http://www.howpm.com" target="_blank"><img src="http://www.google.com.hk/images/srpr/nav_logo27.png" /></a></div>

查看 CSS HTML的相关文章

转载本站原创文章请注明:文章转自 灰狼IT路,链接: https://itlu.org/articles/1481.html

已有 2 条评论

  1. 像我的博客的评论textarea里的图片就用到了垂直和水平居中,但在IE6里,无效,哈哈。

    1. 这个是可以兼容IE6,如果不是为了兼容,也不用这么麻烦

添加新评论