CSS垂直对齐文本到图片中间

Question

可能重复：
如何使用CSS将文本垂直对齐到图像旁边？

我难以在div中将spans 垂直居中。

这是简单的代码：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;

}

如何在

中垂直居中？

​

- Lari13

Answer 1

只需添加 img{vertical-align:middle}。要对齐的是图片而不是文字。

- Joseph

Answer 2

如果您知道容器的高度 - 您可以使用 line-height http://jsfiddle.net/4hDTb/3/ 检查这个 fiddle..

- Vivek Chandra