关闭

实现图片垂直居中的方法

97人阅读 评论(0) 收藏 举报

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

>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:718次
    • 积分:12
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章存档