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

Question

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

​

​

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

对于我的html/css，你知道我该怎么做吗？

Answer 1

在容器框中：

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

内盒：

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

http://jsfiddle.net/8QMGf/

请注意，inline-block不适用于较旧的be，但结果不会那么糟糕

HTH

Answer 2

您可以在vertical-align:middle中使用display:table-cell

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> inside <span>是无效的。你应该用相反的方式包装它们：<p>中的<span>。我在演示中使用了您的原始标记。
• 我将填充移到了内部元素(设置了垂直对齐的<p> )，并从外部元素(包装器<span>)中删除了它。再一次，这些元素应该颠倒过来。