CSS 垂直对齐 :middle on div inside anchor

Question

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

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

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

Answer 1

不需要使用display: table-cell甚至 float本例中的任何内容。

要使标题中的文本垂直居中，请设置 <h2> 的 line-height匹配 #h2wrap 的高度.或者从 #h2wrap 中删除 height并改为增加其顶部和底部的 padding。

在 <a> 中垂直居中图像、标签和按钮标签，将它们的display设置为inline-block并添加vertical-align: middle .您将必须明确设置它们的宽度以及 eliminate the extra spaces caused by inline-block ，但我相信这是最简单的解决方案。