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

让我们从这个答案开始：Is it possible to vertically align text within a div?CSS垂直居中文本。它为什么如此违反直觉？

有被称为vertical-align CSS属性，另一个被称为line-height 我希望，如果我把一个文本的元素（DIV，跨度，P），这里面元素已经设置了属性vertical-align: middle将会计算渲染文本的高度，渲染后的容器元素的高度以及文本将在容器元素中垂直居中。

但根据答案似乎不是这样的工作方式：

认为是由于行高。如果您将高度添加到准确的内部文字所在的元素上？也就是说，如果在012px容器中有一个块为的字体大小为10px（理论高度：10px）的文本块为60px，文本的最终结果是什么？大多数肯定在容器的顶部，因为文本，只会在文本流，高度内侧的位置本身：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>

来源

2014-10-02 Revious

浏览器从左上角到右下角读取像素，所以它不能真正垂直居中，因为在文本之前的像素将在文本本身之前计算，如果这是有意义的。我不知道如果这会帮助你。 – 2014-10-02 09:46:53

@ Goosebumbs：我不确定理解。我明白，出于效率的原因，浏览器使用一种算法，在计算div本身的高度和文本的高度之前计算文本的高度，从而导致系统错误，从而使得开发人员.. – Revious 2014-10-02 09:58:36

'vertical-align'不适用于文本布局。它意味着将元素垂直对齐到其父项。所以这是违反直觉的，因为你期望它做一些它没有设计的事情。就像我期望'color'规则设置div的背景颜色，而不是在div中设置文本颜色。 http://phrogz.net/css/vertical-align/index.html – Anthony 2014-10-02 10:00:39

-2

我要感谢安东尼和Alohci他们的意见。如果他们愿意接受答案，我会接受他们。

所引用的链接给予的原因很好解释为什么垂直对齐似乎并没有按预期：

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

vertical-alig n的表格单元格
内联元素

在它完全忽略了所有其他元素的垂直对齐。

正如Alohci所建议的，至少有三种其他方式可以在容器中垂直对齐内容：绝对定位，变换和柔性盒。

来源

2014-10-02 10:53:53 Revious

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

回答

相关问题