0

我试图让一个具有 css 属性的 divdisplay:table-cell; vertical-align:middle表现得“应该”。我的期望是这些 div 中的文本将垂直对齐，无论它是否包含在锚点中。

这是一个 jsfiddle：http: //jsfiddle.net/smittles/GsKg6/

我做错了什么，阻止了垂直对齐属性将文本呈现为垂直居中，就像此示例中的标题一样。

4

2 回答 2

2

在这个例子中没有必要使用display: table-cell，甚至没有必要。float

要使标题中的文本垂直居中，请将 的行高设置<h2>为与 的高度匹配#h2wrap。或者删除高度并#h2wrap增加其顶部和底部填充。

要将标签中的图像、标签和按钮垂直居中<a>，请将它们的显示设置为inline-block并添加vertical-align: middle. 您将必须明确设置它们的宽度并消除由 inline-block 引起的额外空格，但我相信这将是最简单的解决方案。

于 2013-11-02T00:45:01.050 回答
1

如果你有多行文本line-height将不起作用。

有关应用垂直对齐的方法，请参见this。line-height不适用于需要换行的文本（我相信你有）。你必须使用display: table-cell.

于 2013-11-02T05:51:42.797 回答