垂直对齐固定区域中的文本

Question

我有一系列元素，其中包含一个包含文本的块下方的图片。偶尔，文本会变得太长并且会突破到第二行。它看起来像这样：

我需要垂直对齐文本，使其始终居中。我在这里创建了一个jsfiddle以帮助提供答案：http://jsfiddle.net/WDChT/

根据我的html / css，我有什么想法可以做到这一点？

Answer 1

您可以将display:table-cell与vertical-align:middle：

一起使用

http://jsfiddle.net/WDChT/3/

我添加了什么：

span.redStrip {
    padding:0 11px;
    height:36px;
}
span.redStrip p {
    vertical-align:middle;
    display:table-cell;
    height:36px;
    padding:0;
    margin:0;
}

很少有事情需要注意：

• IE的旧版本缺少支持（还有什么是新的？）
• <p>内<span>无效。你应该反过来包裹它们：<span>在<p>内。我使用原始标记进行演示。
• 我将填充移动到内部元素（带有垂直对齐集的<p>）并将其从外部元素（包装器<span>）中移除。再一次，这些要素应该颠倒过来。

Answer 2

在容器盒中：

line-height:60px;
height:60px;

内盒：

display:inline-block;
vertical-align:middle;

http://jsfiddle.net/8QMGf/

请注意，内联块不适用于较旧的IE，但结果不会那么糟糕

HTH