纯CSS使用font-size实现未知尺寸图片的垂直居中

http://www.doyoe.com/model/xhtmlcss/style/vercen/2.html

 

dybox{

    zoom:1;

    overflow:hidden;

    width:930px;

    margin:0 auto;

    padding:5px 0;

    background:#333;

    list-style:none;

}

.outer{

    display:table;

    *display:inline;

    overflow:hidden;

    float:left;

    width:300px;

    height:300px;

    margin:0 5px;

    background:#eee;

}

.outer p{

    display:table-cell;

    *display:block;

    *font:normal 270px/1 Arial; /*容器高度与字号的比值约为1.111，换算字号时直接用容器高度除以1.111然后取整*/

    text-align:center;

    vertical-align:middle;

}

.outer img{

    vertical-align:middle;

}

 

<ul class="dybox">

    <li class="outer">

        <p><img src="http://qq303182519.blog.163.com/blog/pic1.jpg" alt="图片水平垂直居中" width="72" height="63" title="图片水平垂直居中" /></p>

    </li>

    <li class="outer">

        <p><img src="http://qq303182519.blog.163.com/blog/pic2.jpg" alt="图片水平垂直居中" title="图片水平垂直居中" /></p>

    </li>

    <li class="outer">

        <p><img src="http://qq303182519.blog.163.com/blog/pic1.jpg" alt="图片水平垂直居中" title="图片水平垂直居中" /></p>

    </li>

</ul>