未知高度图片垂直绝对居中 – 学习画板

首页 » 记事本 » 未知高度图片垂直绝对居中

未知高度图片垂直绝对居中

在图片展示页面,经常会遇到图片绝对居中的需求,在支持display:table-cell的浏览器中,使用vertical-align:middle即可实现垂直居中。

<style type="text/css">
.middle-box {
    /* width:400px;
    height:400px;
    border:solid 1px #bbb; */
    text-align:center;
    display:table-cell; /* IE7+ */
    vertical-align:middle;
}
.middle-box .middle-hack {
    width:0px;
    height:100%;
    font-size:0;
    display:inline-block; /* IE6、IE7 */
    vertical-align:middle;
}
.middle-box img {
    vertical-align:middle;
}
</style>
<div class="middle-box"><i class="middle-hack"></i><img src="PhotoName.png" alt="" width="245" height="40" /></div>
此文章发表在 记事本. 将 固定链接 加入收藏.