垂直对齐用CSS表不工作

我试图垂直对齐使用CSS表DIV中一些文字文本，但它并不适用于某些原因：垂直对齐用CSS表不工作

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

我如何能有什么建议让这个代码工作？

来源

2012-12-15 Shrey Gupta

不要使用表格来垂直对齐，最简单的方法就是文本的行高设置为元素的高度，你想让它在中心。还有其他方法，[这里]（http://phrogz.net/css/vertical-align/index.html） –

它的工作原理，它只是你没有使用你的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>

来源

2012-12-15 03:25:09

哈哈，所以我得到-1，至少说出为什么？ –

行高不能用2行 – daniel

@丹尼尔哦雅这是一个有效的理由..应该拿出我的回答 –

这是最好的答案，我发现：http://phrogz.net/css/vertical-align/index.html

这出现了很多。没有简单的答案。

从网页A报价：

各种IRC频道我帮了上一个常见的问题是“我如何垂直中心我的东西，这个区域内”这个问题通常跟着 “我正在使用vertical-align：middle，但它不工作！”

这里的问题有三个方面：

一个HTML布局传统上并不是用来指定垂直行为。就其性质而言，它在横向上进行缩放，并且基于可用宽度将内容流动到适当的高度。传统上，水平尺寸和布局很容易;垂直大小和布局是从中派生的。

B上的原因垂直对齐：中间是不能做什么，需要想是因为笔者不明白什么是应该做的，但 ...

ç...这是因为CSS规范真的搞砸了这一个（在我看来） - 垂直对齐用于指定两个完全不同的行为，具体取决于它使用的地方。

文章继续解释说，有两种基本方法：绝对定位和其他答案中的行高方法。

来源

2012-12-15 03:25:22 ccleve

对我来说，你只是把桌子的宽度，而不是高度。

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

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

来源

2012-12-15 03:25:48 daniel

'你只要把表格的宽度，而不是height.'的？你正在添加高度... –

把宽度，而不是高度，意味着输入'宽度'，而不是'高度'。 – daniel

OP已经在使用宽度只看他的问题，你应该说把桌子的高度而不是宽度给我？ –

垂直对齐用CSS表不工作

回答

相关问题