Html CSS：垂直居中的文本，具有一个固定宽度的容器和流体文本长度

我很难找到适合这种全流体布局的正确解决方案。我希望以下小提琴中的子标题与图标旁边的子标题垂直居中对齐。根据浏览器的大小（以及不同的文本长度），子标题可能会分成多行

我准备了两个小提琴-第一个尝试是我的首选方法，因为我已经对类似的布局进行了更彻底的测试：

第二把小提琴，是在相同的情况下尝试使用

display:table cell，但就我的一生而言，我无法修复丢失的正确文本对齐方式，而且我也从未彻底测试过IE6+与此显示类型的兼容性：

（这几乎可以正常工作，避免丢失
文本对齐：右；
）

我查了很多类似的问题，但找不到我想要的，所以很好的答案指向了我错过的一个，或者找到了解决上述问题的方法

全部以垂直对齐文本的名义…：/


浏览器更新：我在Chrome中进行了修改，我看到IE8的行为类似，但对于解决方案2，Ffox3的行为不同。
如果我正确理解您的要求，您只需将
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;
}


主标题
流体跨度
大量的长文本。。。
.clearfix:之后{
内容：“；
显示：块；
明确：两者皆有；
}
氢{
浮动：对；
文本对齐：右对齐；
背景色：#999；
显示：表格；
宽度：43%；
}
跨度{
背景色：#ccc；
边框：1px#000实心；
垂直对齐：中间对齐；
}
span#流体{
显示：表格单元格；
身高：100%；
}
span#图标{
显示：表格单元格；
宽度：60px；
高度：40px；
}


如果这不是你想要的，请告诉我
 你能澄清这个问题吗？你想要什么垂直居中？如果它是.icon，它看起来正好适合我（Chrome 14）文本，在一行或两行上垂直对齐（对不起，该信息是小提琴的一部分）。您可能需要将小提琴拉长一点，才能看到与解决方案2失去正确对齐。目前，图标看起来居中，因为它为容器提供了高度。啊，我现在明白了。确保你在实际问题中提供了这些信息。在你的小提琴中，h2的高度必须变化吗？还是可以修复？如果固定；我想我有一个解决办法。它必须有所不同，因为标题的长度和屏幕的宽度都会有所不同。我尝试在解决方案#2上设置“最小高度”，但这似乎只接受高度值。但是，是的，它必须有所不同，但请继续发布您的解决方案，因为它仍然可以很好地使用（我希望无论如何！）。干杯，托马斯。它就快到了，事实上它在IE8、Chrome、Ffox、Opera、Safari中都发挥了作用——但IE6和IE7似乎没有任何线索——所有的东西都显示为内联的。我想我将使用它并为IE6/7提供备用方案。我将把这个问题留一点时间，看看您或其他人是否可以提供有关如何在IE6/7中进行垂直对齐的任何线索。感谢您迄今为止的帮助托马斯：多克，在中添加了它-为了修复右对齐的丢失，我添加了边距左：自动；到表格化的H2元素。IE6/7采用了一种粗糙的定位方法，它不总是垂直居中——但太糟糕了@Danjah ack，很抱歉这么晚才回复。很高兴你找到了答案。：）