CSS vertical-align：在div内部的div中间

Question

我正在尝试使用css属性display:table-cell; vertical-align:middle获取一个div来表现“应该”。我的期望是这些div中的文本将垂直对齐，无论它是否包裹在锚中。

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

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

Answer 1

此示例中无需使用display: table-cell甚至float。

要将标题中的文字垂直居中，请设置<h2>的行高以匹配#h2wrap的高度。或者从#h2wrap移除高度，然后增加其顶部和底部填充。

要垂直居中<a>标签内的图片，标签和按钮，请将显示设置为内联块并添加{{1} }。您必须明确设置其宽度以及eliminate the extra spaces caused by inline-block，但我相信这将是最简单的解决方案。

Answer 2

如果您有多行文字line-height将无效。

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