父对象中的垂直对齐图像

Question

我只是需要一种方法来使图像在其父元素内垂直对齐（在本例中为<li>，但如果解决方案也适用于<div>）。我已经尝试了一切，并不能得到任何工作......

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

Answer 1

试试这个：

<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