css - 在固定区域垂直对齐文本

Question

我有一系列元素，这些元素的图片下方有一个包含文本的 block 。有时，文本会变得太长而断到第二行。它看起来像这样:

我需要垂直对齐文本以使其始终居中。我在这里创建了一个 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>)中移除。再一次，这些元素应该被颠倒过来。