21

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

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

我给vertical-align:middle形象，没有任何改变！

谢谢

4

7 回答 7

13

即使这是一篇非常古老的帖子，您也可以使用以下方法实现此目的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 示例

于 2016-07-03T10:19:18.220 回答
12

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/

于 2012-05-09T12:40:56.987 回答
6

Add line-height (equal to picture height):

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

See example.

于 2012-05-09T12:46:04.033 回答
1

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

于 2012-05-09T12:40:16.330 回答
1

您也可以手动更改

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

演示

或者你可以使用一张桌子

于 2012-05-09T12:41:33.633 回答
0

您可以执行以下操作：

  div:after {
        content:"";
        clear:both;
        display:block;
    }
于 2013-11-07T18:57:01.520 回答
0
  • 浮动图片
  • 为图片设置高度。
  • 在图片后放置一个 div1>div2>text。
  • 将 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>
于 2021-09-28T06:32:44.707 回答