垂直对齐图像旁边的文本？

Question

为什么 vertical-align: middle 不起作用？然而， vertical-align: top 确实 有效。

 span{
  vertical-align: middle;
}

 <div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

原文由 sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际上，在这种情况下非常简单：将垂直对齐应用于图像。因为它全部在一行中，所以它实际上是您要对齐的图像，而不是文本。

 <!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

在 FF3 中测试。

现在你可以使用 flexbox 来实现这种类型的布局。

 .box {
   display: flex;
   align-items:center;
}

 <div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

原文由 Michael Haren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

下面是垂直对齐的一些简单技巧：

一行 vertical-align:middle

这个很简单：设置文本元素的行高等于容器的行高

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直对齐：底部

绝对定位一个内部 div 相对于它的容器

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直对齐：中间

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果你必须支持旧版本的 IE <= 7

为了让它全面正常工作，您必须对 CSS 进行一些修改。幸运的是，有一个 IE 错误对我们有利。在容器上设置 top:50% top:-50% 在内部 div 上设置 — ，您可以获得相同的结果。我们可以使用另一个 IE 不支持的功能将两者结合起来：高级 CSS 选择器。

 <style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度 vertical-align:middle

该解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了 transform: translateY 属性。 ( http://caniuse.com/#feat=transforms2d )

将以下 3 行 CSS 应用于一个元素将使其在其父元素中垂直居中，而不管父元素的高度如何：

 position: relative;
top: 50%;
transform: translateY(-50%);

原文由 Adam Lassek 发布，翻译遵循 CC BY-SA 3.0 许可协议