如何在浮动图像旁竖直对齐文本？

Question

我想在一个浮动图像后面垂直对齐一个 span 元素。 我在 Stack Overflow 上搜索并找到了 这篇文章，但我的图像是浮动的。

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

我给图片添加了vertical-align:middle，但是没有任何变化！

谢谢。

- Mosijava

---

好的，如果你给图片设置 vertical-align:middle 属性，它似乎会改变。我在 Chrome 上测试过了。 - petrichor

Answer 1

即使这是一个非常古老的帖子，你仍然可以使用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 example

- The Codesee

---

Flexbox 再次获胜！ - swrobel

Answer 2

首先从中删除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>

Check this http://jsfiddle.net/ws3Uf/

- sandeep

---

我使用了你的方法并将我的浮动从图像中删除。但是当我将<span>内容更改为两行长的内容时，第二行会移到图像底部。 最后，我在<span>中添加了display:inline-block，它起作用了！ 谢谢 - Mosijava

@Mosijava - 使用inline-block对我没有起作用 - 它只是把所有东西放在下一行。你有这个工作的例子吗？ - Nick

如果文本足够长需要多行，那么这与float不会产生相同的效果。http://jsfiddle.net/9667cqun/ - Alec Jacobson

这适用于左侧的图像，但不适用于浮动到右侧的图像。 - Keith Hughitt

当你有一段长文本时，它会以非常愚蠢的方式断开。 - user151496

Answer 3

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

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

点击查看示例。

- ScottS

---

如果跨度有两行长呢？ - Mosijava

@Mosijava--这个解决方案只适用于单行文本。我很高兴Sandeep的解决方案对你有用（显然你不需要像标题所示的图像上的float）。 - ScottS

Answer 4

一个 <span> 是一个内联元素，尝试添加 display:block 到 span，给它与图像相同的高度和匹配的行高。同时将其向左浮动。那应该可以解决问题。

- atmd

Answer 5

您也可以手动更改

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

演示

或者您可以使用表格

- huMpty duMpty

Answer 6

• 浮动图片
• 设置图片高度。
• 在图片后放置 div1>div2>text。
• 将 div1 设置为与图片相同的高度。
• 将 div2 位置设为相对定位，顶部为0，transform translateY -50。

https://codepen.io/aungthihaaung/pen/ExXGvGy

.picture {
  height: 300px;
  float: left;
}

.div1 {
  height: 300px;
}

.div2 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 <img src="https://via.placeholder.com/300" class="picture" />
  <div class="div1">
    <div class="div2">
      <h1>Hi There!</h1>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, deleniti
      perferendis! Ut, eaque iste incidunt atque perferendis odio laborum
      nobis obcaecati exercitationem molestiae nihil est recusandae
      mollitia. Fuga beatae inventore, adipisci ipsa aliquid corporis harum
      ex tenetur iure assumenda optio quod eaque omnis porro ab consequuntur
      unde a totam minima.
    </div>
  </div>

- Aung

Answer 7

你可以这样做：

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

- Franz Fahrenkrog Petermann