CSS垂直居中文本。它为什么如此违反直觉？

2018-06-27 02:59:17

让我们从这个答案开始：可以垂直对齐div中的文本吗？

有一个叫做vertical-align的CSS属性，另一个叫做line-height我期望如果我把一个文本放到一个元素（div，span，p）中并且这个元素已经设置了属性vertical-align: middle渲染文本的高度将被计算，渲染的容器元素的高度也将被计算，并且文本将在容器元素内垂直居中。

但根据答案，它似乎不以这种方式工作：

这是由于行高。如果您将高度添加到其中的文字恰好在其中的文字所在的位置？也就是说，如果在一个60px的容器内有一个字体大小为10px（理论高度：10px）的文本块，文本最终会到达哪里？大多数情况下在容器的顶部，因为文本只能放置在文本流动的地方，在高度：10px的空间内

我不明白这一点。线高应该会影响两条线之间的距离。它应该像一种适用于文本每个字母的保证金顶部一样工作。直觉上我认为垂直对齐比'边缘'更强。

我应该怎么想才能理解为什么垂直对齐的行为不是按预期垂直对齐元素？为什么选择CSS创作者？

    #column-content {
      display: inline-block;
      border: 1px solid red;
      position: relative;
    }
    #column-content strong {
      color: #592102;
      font-size: 18px;
    }
    img {
      margin-top: -7px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle
    }

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

我必须感谢安东尼和阿洛奇的评论。如果他们愿意接受答案，我会接受他们。

引用的链接为垂直对齐看起来不像预期的那样提供了一个很好的解释：

http://phrogz.net/css/vertical-align/index.html

http://christopheraue.net/2014/03/05/vertical-align/

总之原因是垂直对齐有两种不同的行为：

表格单元格中的垂直对齐

垂直对齐内联元素

在所有其他元素中，它完全被忽略。

正如Alohci所建议的那样，至少有三种其他方式来垂直对齐其容器中的内容：绝对定位，变换和flexbox。

链接地址: http://www.djcxy.com/p/75833.html

上一篇: CSS vertical centering a text. Why is it so counterintuitive?

下一篇: How to position an element dead center in fluid layout with variable height?

CSS垂直居中文本。 它为什么如此违反直觉？

CSS垂直居中文本。它为什么如此违反直觉？