html - CSS:垂直居中文本，具有一个固定宽度的容器和可变文本长度

Question

我无法为这种完全流畅的布局找到合适的解决方案。我希望以下 fiddle 中的副标题在图标旁边垂直居中对齐。副标题可能会分成多行，具体取决于浏览器的大小(以及不同的文本长度)。

我准备了两个 fiddle - 第一次尝试是我的首选方法，因为我已经更彻底地测试了类似的布局:

http://jsfiddle.net/mmDFC/

第二个 fiddle 是尝试使用 display:table-cell; 在相同的情况下，但我无法修复丢失的正确文本对齐方式，而且我'我也从未彻底测试过与此显示类型兼容的 IE6+:

http://jsfiddle.net/mmDFC/1/ (这几乎可以工作，保存 text-align:right; 的损失)

我已经查找了许多类似标题的 SO 问题，但找不到我想要的，所以很好的答案让我找到了我错过的问题，或者提出了上述问题的解决方案。

所有以垂直对齐文本的名义... :/

---

浏览器更新:我在 Chrome 中摆弄，我看到 IE8 的行为类似，但 Ffox3 的行为与解决方案 2 不同。

Answer 1

如果我理解你想要什么，你只需要将 display:table 添加到 h2

<div class="wrapper clearfix">
    <h1>Main Title</h1>
    <h2>
        <span id="fluid">
            Fluid Span
        </span>
        <span id="icon">
            Lots of long text...
        </span>

    </h2>
</div>

.clearfix:after {
    content:"";
    display:block;
    clear:both; 
}
h2 {
    float:right;  
    text-align:right; 
    background-color:#999;
    display:table;
    width:43%;
}
span {
    background-color:#ccc;   
    border:1px #000 solid;
    vertical-align:middle;
}
span#fluid {
    display:table-cell;

    height:100%;

}

span#icon { 
    display:table-cell;
    width:60px;
    height:40px;
}

http://jsfiddle.net/thomas4g/WecP4/28/

如果这不是您想要的，请告诉我。