我很难找到这个全流体布局的正确解决方案。我希望下面提琴中的子标题在图标旁边垂直居中对齐。子标题可以打断成多行,具体取决于浏览器的大小(以及文本长度的变化)。
我准备了两个小提琴-第一次尝试是我的首选方法,因为我已经更彻底地测试了类似的布局:
http://jsfiddle.net/mmDFC/
第二种方法是在相同的情况下使用display:table-cell;,但在我的一生中,我无法修复丢失的正确文本对齐,而且我也从未使用这种显示类型彻底测试过IE6+compat:
http://jsfiddle.net/mmDFC/1/(这几乎可以工作,节省了text-align:right;的损失)
我查了很多类似的题目,但找不到我想要的,所以很好的答案给我指出了一个我错过了,或想出了一个解决上述问题的办法。
以垂直对齐文本的名义。。。:/
浏览器更新:我在Chrome中操作,我看到IE8的行为类似,但是Ffox3对于解决方案2的行为不同。

最佳答案

如果我明白你想要什么,你只需要将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/
如果这不是你想要的,告诉我。

10-05 20:59
查看更多