淘宝的面试题目: DIV层内容垂直居中的多_css

淘宝解法：
<style type="text/css">            
.box {      
    display: table-cell;      
    vertical-align:middle;      
    width:200px;      
    height:200px;      
    text-align:center;      
    /* hack for ie */      
    *display: block;      
    *font-size: 175px;      
    /* end */      
    border: 1px solid #eee;      
}      
.box img {      
    vertical-align:middle;      
}      
</style>
<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg&quot; />
</div>
网友解法一：
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
line-height:200px;
border: 1px solid #eee;
}
.box img {vertical-align:middle;}
网友解法二：
.box{
text-align:center;
width:200px;
height:
200px;
border:1px solid #ff0;
vertical-align: middle;
display: table-cell;
}
.box img{margin-top:expression(100-this.height/2);}
我一直用最后那个解决方法，呵呵

欢迎大家阅读《淘宝的面试题目: DIV层内容垂直居中的多…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)