CSS垂直对齐文本到图像的中间[重复]

Posted 2023-03-05

【中文标题】CSS垂直对齐文本到图像的中间[重复]

【英文标题】：CSS Vertical align text to the middle of image [duplicate]

【发布时间】：2012-03-10 01:42:22

【问题描述】：

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

我很难将跨度 vertically middle 在 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;

如何在div.bar 中垂直居中<span>s？

​

【参考方案1】：

只需添加imgvertical-align:middle。这是您要对齐的图像，而不是文本。

【参考方案2】：

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