CSS垂直对齐文本图像的中间

Question

可能重复：
How do I vertically align text next to an image with CSS?

我有困难的中心分布在DIV vertically middle。

这个简单的代码：http://jsfiddle.net/4hDTb/

HTML：

<div class="bar"> 
    <span>Simple text</span> 
    <img src="" class="img1" /> 
    <span>Another text</span> 
    <img src="" class="img2" /> 
</div>​ 

CSS：

.bar 
{ 
    width: 100%; 
    height: 50px; 
    border: 1px black solid; 
} 
.img1 
{ 
    width: 100px; 
    height: 50px; 
    border: 1px black solid; 
} 

.img2 
{ 
    width: 200px; 
    height: 50px; 
    border: 1px black solid; 

} 

如何div.bar垂直方向的中间居中<span>s？

Answer 1

只需添加img{vertical-align:middle}。这是你想要对齐的图像，而不是文本。

Answer 2

如果你知道容器的高度 - 可以用line-heighthttp://jsfiddle.net/4hDTb/3/检查小提琴..