Question

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

<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：

来实现这一目标

＆＃13;

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

＆＃13;

<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>

＆＃13;

JsFiddle example

Answer 3

添加line-height（等于图片高度）：

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

See example.

Answer 4

<span>是内联元素，尝试将display:block添加到范围，为其提供与图像相同的高度和要匹配的线高。把它漂浮下来。这应该工作

Answer 5

您也可以手动更改

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

Demo

或者您可以使用table

Answer 6

您可以执行以下操作：

  div:after {
        content:"";
        clear:both;
        display:block;
    }

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

6 个答案: