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

Posted 2023-03-05

【中文标题】如何垂直对齐浮动图像旁边的文本？

【英文标题】：how to vertically align text next to a floated image?

【发布时间】：2012-05-17 23:20:09

【问题描述】：

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

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

我将vertical-align:middle 给图像，没有任何改变！

谢谢

【问题讨论】：

好吧，如果你把vertical-align:middle 给图像，它似乎会改变。我在 Chrome 上测试过。

您在style 中忘记了; 中的img height 和float。

@McFjodor 谢谢，我编辑了它

【参考方案1】：

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

【参考方案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>

查看http://jsfiddle.net/ws3Uf/

【讨论】：

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

@Mosijava - 使用 inline-block 对我不起作用 - 它只是将所有内容放在下一行。你有这个工作的例子吗？

如果文本足够长而需要多行，这与float 的效果不同。 jsfiddle.net/9667cqun

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

当你的文本很长时，它会以一种非常愚蠢的方式中断

【参考方案3】：

您也可以手动更改

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

Demo

或者你可以使用table

【参考方案4】：

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

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

See example.

【讨论】：

如果跨度有 2 行长怎么办？

@Mosijava——此解决方案仅适用于单行文本。我很高兴 Sandeep 的解决方案对您有用（您显然不需要像标题所建议的那样在图像上使用 float）。

【参考方案5】：

您可以执行以下操作：

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

【参考方案6】：

即使这是一篇非常古老的帖子，您也可以使用 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

【讨论】：

Flexbox 又赢了！

【参考方案7】：

浮动图片 为图片设置高度。 在图片后面放一个div1>div2>文字。 将 div1 设置为与图片相同的高度。 设置 div2 相对位置，顶部 0 并变换 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>