css - 使用 CSS 表格垂直对齐文本不起作用

Question

我试图使用 CSS 表垂直对齐 div 内的一些文本，但由于某种原因它不起作用：

<div class="navlink" style="width:150px; display:table;">
<div style="text-align:center; display:table-cell; vertical-align:middle;">Some Text</div>
</div>

关于如何使此代码正常工作的任何建议？

Answer 1

对我有用，您只需放置表格宽度而不是高度。

<div class="navlink" style="width:150px; display:table;">

---><div class="navlink" style="height:150px; display:table;">

Answer 2

它有效，只是您没有为单元格 div 使用任何高度，所以这样做

演示

<div class="navlink" style="width:150px; display:table;">
   <div style="text-align:center; display:table-cell; height: 200px; vertical-align:middle;">Some Text</div>
</div>

Answer 3

这是我找到的最佳答案：http: //phrogz.net/css/vertical-align/index.html

这经常出现。没有简单的答案。

来自页面的引用：

我帮助过的各种 IRC 频道的常见问题解答是“我如何在这个区域内垂直居中我的东西？” 这个问题后面通常会出现“我正在使用 vertical-align:middle 但它不起作用！”

这里的问题是三个方面：

传统上，HTML 布局并非旨在指定垂直行为。就其本质而言，它会按宽度缩放，并且内容会根据可用宽度流动到适当的高度。传统上，水平尺寸和布局很容易；垂直尺寸和布局由此衍生。

B vertical-align:middle 没有做想要的事情的原因是因为作者不明白它应该做什么，但是......</p>

C ... 这是因为 CSS 规范确实搞砸了这一点（在我看来）——vertical-align 用于指定两种完全不同的行为，具体取决于它的使用位置。

文章继续解释有两种基本方法：绝对定位和其他答案中的 line-height 方法。