实现图片垂直居中的方法

div水平居中很容易,设置css样式 text-align: center;  就可以了。

垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。

通过一个空白图片可以达到垂直居中的效果。

复制代码
<html>
    <style>
    #image{ 
        width:500px;
        height:500px;
        background:#fff000;
        text-align: center;
        overflow: hidden;
    }
    #image img {
    vertical-align: middle;
   }
    #block {
        width: 0px;
        height: 100%;
    }    
    </style>
    <body>
        <div id="image">
            <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
             <img src="" id="block"/>
        </div>
    </body>
</html>
复制代码

 

 个人觉得vertical-align: middle 是相对于左边的高度垂直居中的,我给左边一个填满div的图片,就可以实现垂直居中了。

<转至

垚淼博客http://www.cnblogs.com/ljmin/archive/2012/07/03/ljmin.html

>

阅读更多
想对作者说点什么? 我来说一句

css图片垂直居中方法

2008年05月05日 2KB 下载

图片垂直居中样式

2012年11月14日 947B 下载

没有更多推荐了,返回首页

不良信息举报

实现图片垂直居中的方法

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭