我试图使用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>
有关如何使此代码生效的任何建议?
答案 0 :(得分:2)
适合我,你只需要放宽桌子而不是高度。
<div class="navlink" style="width:150px; display:table;">
---&GT; <div class="navlink" style="height:150px; display:table;">
答案 1 :(得分:1)
它有效,只是你没有为你的细胞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>
答案 2 :(得分:1)
这是我找到的最佳答案:http://phrogz.net/css/vertical-align/index.html
这出现了很多。没有简单的答案。
页面引用:
我帮忙的各种IRC频道的常见问题解答是“我如何垂直 把我的东西放在这个区域内?“这个问题经常出现 “我正在使用vertical-align:middle但它不起作用!”
这里的问题有三个方面:
HTML布局传统上不是为了指定垂直而设计的 行为。就其本质而言,它在宽度方面和内容上进行了缩放 根据可用的宽度流向适当的高度。 传统上,水平尺寸和布局很容易;垂直尺寸 布局源于此。
B vertical-align:middle之所以不做想要的事情 是因为作者不明白它应该做什么,但是 ...
C ...这是因为CSS规范确实搞砸了这个 up(在我看来)-vertical-align用于完全指定两个 不同的行为取决于它的使用位置。
本文接着解释说,有两种基本方法:绝对定位,以及其他答案中的行高法。