父级内的垂直对齐图像

时间:2009-11-16 08:30:58

标签: html

我只需要一种方法使图像在其父元素中垂直对齐(在本例中为<li>,但如果解决方案也适用于<div>,则会很好)。我已经尝试了一切,但却无法正常工作......

基本上,我想垂直对齐它。另外,我不知道父元素的高度。

1 个答案:

答案 0 :(得分:2)

试试这个:

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>

CSS:

    <style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

信用:http://www.brunildo.org/test/img_center.html