怎么给DIV中的Img图片垂直居中


在我们进行网站设计的时候,经常性会遇到把div中的img进行垂直居中的操作,总是不知道该怎么设置才好?今天拾图网|温州网站建设来小结一下自己制作网站过程中的方法,其实有很多实现方法都是通过将外部DIV容器的显示模式设置成table才能实现垂直居中,也就是div来模拟table来处理。

1、原理: 利用vertical-align实现垂直,决定行高的是行内最高的元素的值

案例如下:

  • html代码:

<div><span></span><img src='tshinet.jpg' /></div>
  • 案例中div的CSS


div{width:300px;height:300px;text-align:center;border:solid 1px #ddd;}
  • 案例中span的CSS

div span{height:100%;display:inline-block;vertical-align:middle;}
  • 案例中img的CSS

div img{width:150px;height:150px;vertical-align:middle;}

2、利用使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中

.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; 
} 
<div class="box"> 
 <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>

3、方法将外部容器的显示模式设置成display:tableimg标签外部嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

<div id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</div>
<style type="text/css">
#box{
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span{
    display:table-cell;
    vertical-align:middle;
}
#box img{
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
    position:relative;
    overflow:hidden;
}
#box span{
    position:absolute;
    left:50%;top:50%;
}
#box img{
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

4、这个方法与第三个有点类似,结构同上,利用的是CSS Hack(这个方法有点缺点——在标准的浏览器下因为#box的显示模式被设置成为display:table-cell,让#box以表格单元格的形式呈现,类似于td标签;所以#box的margin属性就不能使用了,而且border属性在IE8下也无法只用)

<style type="text/css">
#box{
    width:500px;
    height:400px;
    overflow:hidden;
    position:relative;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;
    background:#fff;
}
#box span{
    position:static;
    *position:absolute; /*针对IE6/7的Hack*/
    top:50%; /*针对IE6/7的Hack*/
}
#box img {
    position:static;
    *position:relative; /*针对IE6/7的Hack*/
    top:-50%;left:-50%; /*针对IE6/7的Hack*/
    border:1px solid #ccc;
}
</style>

5、还是在标准浏览器下把#box设置为display:table-cell属性,然后利用在img图片标签的前面插入空标签的方法来达到显示效果;

html结构代码:

<div id="box">
    <i></i><img src="images/demo.jpg" alt="" />
</div>

css样式代码:

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
#box img {
    vertical-align:middle
    }
</style>
<![endif]-->

6、在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现,IE6/IE7使用了CSS表达式来实现兼容。

<div id="box">
    <p><img src="images/demo.jpg" alt="" /></p>
</div>

#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box p{
    width:500px;height:400px;
    line-height:400px; /* 行高等于高度 */
}
  
/* 兼容标准浏览器 */
#box p:before{
    content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关,尽可能的节省字符 */
    margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
    visibility:hidden; /*设置成隐藏元素*/
}
  
#box p img{
    *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}

以上有拾图网收集整理的资料,如有雷同请多多包涵!每天捡一点!

注:本文转载自拾图网[http://www.tshinet.com],转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除。
上一篇 下一篇

淘宝热销

  • Mistine小黄帽防晒霜乳SPF50泰版面部防紫外线隔离男女军训蜜丝婷

    【推荐理由】赠运费险

    【优惠券】20   【券后价】59.00

    【下单链接】18¥ CZ0001 G5fHdEqOsnB¥

    >>>>>> 马上打开

  • G7旗舰店越南进口美式纯黑咖啡粉速溶无糖0脂减燃正品学生提神

    【推荐理由】库存紧张,好评过万

    【优惠券】3    【券后价】26.90

    【下单链接】27¥ CZ0001 zb0bdEqLV7G¥

    >>>>>> 马上打开