CSS将文本垂直对齐到图像的中间 [英] CSS Vertical align text to the middle of image

问题描述

可能重复：

我在困难中心跨垂直中间在div。

I have difficulties to center spans vertically middle in div.

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

}

如何集中< span> ; s 在 div.bar 垂直中间？

推荐答案

只需添加 img {vertical-align：middle} 。它是您要对齐的图像，而不是文本。

just add img{vertical-align:middle}. it's the image you would want to align, not the text.

这篇关于CSS将文本垂直对齐到图像的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！