在固定区域垂直对齐文本

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> 里面 无效。您应该将它们反向包装： 位于

  内。我在演示中使用了您的原始标记。

• 我将填充移动到内部元素（设置了垂直对齐的

  ），并将其从外部元素（包装器 ）中删除。再次，这些要素应该颠倒过来。

Answer 2

在容器框中：

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

内部框：

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

http://jsfiddle.net/8QMGf/

请注意，inline-block 不会不能与较旧的 IE 一起使用，但结果不会那么糟糕

HTH