css - 这种在 div 中垂直定位文本的方式怎么样？

Question

我一直在寻找在 div 中定位文本的替代方法，有很多方法，从 javascript 动态定位到最新的 css 单元 vw 和 vh。前几天我意识到有另一种方式一直在我面前，但我从未使用过它，即通过将 div 显示为表格单元格 display:table-cell;vertical-position:middle http://jsfiddle.net/manolis/TPKsf/ 我还没有在生产中使用它，但我想知道使用这个解决方案的优缺点是什么。

谢谢！

score 4 · Accepted Answer

Internet Explorer 7 及更早版本不支持“display:table-cell”，IE8 支持，但需要一个!DOCTYPE，你可以在这里找到更多解释 - http://www.tutorialrepublic.com/css-reference/css-显示属性.php

或者，您也可以通过将 line-height 属性的值设置为等于 div 的高度来垂直对齐 div 中的文本，例如：

你的 CSS：

div{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border: 1px solid #000;
}

您的 HTML：

<div><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a></div>

上述样式规则将 div 内的文本垂直居中或居中对齐。您可以查看此页面以了解 line-height 的工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-text.php

score 1 · Accepted Answer

display:table-cell可能会有一些你不想要的后果。通过快速搜索，我找到了一些相关信息：

display:table-cell元素应该在一个display:table元素内（但不一定需要在一个display:table-row元素内）。
display:table-cell元素不会有边距。
div表格不会像s 那样自动占据整个宽度。
QuirksMode 文档上display:table有一些有趣的信息，甚至还有一个“游乐场”，您可以在其中轻松更改display元素以查看它们如何交互。

我的看法：如果你在一个display:table元素中正确地形成它，并且你只需要它用于表格格式很好的有限目的，那么就去吧（例如，将 404 错误垂直居中作为页面上唯一的框）。

score 1 · Accepted Answer

尝试类似的东西，它不使用vertical-align......但可能对你有用......

CSS：-

#box{
    position:absolute; top:50%; left:0;
    margin-top:-50px; /*Half of height...*/
    width:300px;
    height:100px;
    line-height:100px;
    border:5px solid black;
    text-align:center;
}

工作小提琴

css - 这种在 div 中垂直定位文本的方式怎么样？

3 回答 3

Related

Reference