您现在的位置: 365建站网 > 365学习 > 如何使图片在div里上下居中

如何使图片在div里上下居中

文章来源:365jz.com     点击数:3172    更新时间:2009-12-21 23:58   参与评论

<style type="text/CSS">
         .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;
         
         width
:100px;
         height
:100px;
        
}
        .box img {
         
/*设置图片垂直居中*/
         vertical-align
:middle;
         cursor
:pointer;
        
}
        </style>

Dom元素:

                  <div id="div1"  class="box">
                     
<img src="xxx.png" /><br />风华绝代

                  </div>
这种方式在ie8和firefox3.5中显示正确,在ie7及以下版本无法正确显示,其它浏览器没有测试。因此改成了下面的方式:
         .box{
         float
:left;
         width
:80px;
         height
:80px;
         border
: 1px solid #eee;
        
}

        .selected 
{
            border
:solid 1px black;
            background-color
:Aqua;
            cursor
:pointer;
        
}
        .box img 
{
         
/*设置图片垂直居中*/
         vertical-align
:middle;
         cursor
:pointer;
        
}

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (3172人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------