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;">

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

Answer 2

它有效，只是你没有为你的细胞div使用任何高度，所以这样做

Demo

<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之所以不做想要的事情   是因为作者不明白它应该做什么，但是   ...

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

本文接着解释说，有两种基本方法：绝对定位，以及其他答案中的行高法。

将文本与CSS表垂直对齐不起作用

3 个答案: