如何垂直对齐浮动图像旁边的文本？

Question

我想在浮动图像后垂直对齐跨度.我在堆栈溢出中搜索它并找到这篇文章.但是我的形象浮现了.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

我给vertical-align:middle图像,没有任何改变!

谢谢

Answer 1

首先float从中删除.像这样写:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

检查这个http://jsfiddle.net/ws3Uf/

Answer 2

虽然这是一篇非常古老的帖子,但您可以使用Flexbox以下方法实现此目的:

div {
 display: flex;
 align-items: center;
}

<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

JsFiddle的例子

Answer 3

添加line-height(等于图片高度):

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

见例子.