Question

<div id="wr">
    <div id="con">
        <div id="unknownWidth">some box with unknown width</div>
    </div>
    <div id="knownWidth"></div>
</div>

#wr {
    width:300px;
    height:100px;
    border:1px solid red;
    margin:50px;
}
#knownWidth {
    width:100px;
    height:30px;
    margin:0px auto;    
    border:1px solid gray;
}
#unknownWidth{
    height:30px;
    margin:0px auto;    
    border:1px solid blue;
}

这是小提琴的链接： http://jsfiddle.net/7EsMR/

是否可以避免在display:table框上使用#unknownWidth并保持其提供的相同功能？

需要它在IE7中工作，而不是IE6。：d

所需结果： http://jsfiddle.net/7EsMR/1/

谢谢;）

Answer 1

你可以在孩子上使用display: inline和在包裹上使用text-align: center：

http://jsfiddle.net/3snzb/2/

Answer 2

display:inline + text-align:center的组合可以解决问题：

http://jsfiddle.net/kG846/2/

Answer 3

我想你可以做到：

#wr {
    width:300px;
    height:100px;
    border:1px solid red;
    margin:50px;
    text-align: center; 
}
#knownWidth {
    width:100px;
    height:30px;
    margin:0px auto;    
    border:1px solid gray;
}
#unknownWidth{
    display:inline-block;
    height:30px;
    border:1px solid blue;
}

应该在IE7中工作，因为支持内联块。

CSS divs：display：table alternative？

3 个答案: