CSS div：显示：表格替代品？答案

【问题标题】：CSS divs: display:table alternative?CSS div：显示：表格替代品？
【发布时间】：2012-01-26 04:15:15
【问题描述】：

<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/

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

需要它在 IE7 中工作，但不是 IE6。 :D

要求的结果： http://jsfiddle.net/7EsMR/1/

谢谢 ;)

【问题讨论】：

可能与以下内容重复：stackoverflow.com/questions/283961/…

标签： css html

【解决方案1】：

您可以在孩子上使用display: inline 和在包装上使用text-align: center 的组合：

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

【讨论】：

恐怕 OP 需要 IE7 支持 :-/
@ptriek 对，更新为display: inline，我刚刚检查过。他只需要摆弄一下高度。

【解决方案2】：

display:inline + text-align:center 的组合可能会奏效：

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

【讨论】：

【解决方案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 中工作，因为支持 inline-block。

【讨论】：