html - 在主/父 div 中居中 2 个不同大小的 div

Question

我有 2 个菜单需要以菜单栏为中心。需要在 IE7、IE8、IE9、Chrome、FF 中运行良好。出于举例的目的，我根据 Chrome 测量为两者添加了宽度/高度。

大菜单:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:578px;height:32px;">Foo foo</div>
</div>

小菜单:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

我尝试将样式设置为#inner { width: 50%; margin :自动； } 如 How to horizontally center a <div> in another <div>? 中所述但是有一个菜单大于 50%，所以它被剪掉了。小的卡在左边 20 像素处。在制作原型(prototype)期间，我们用 jQuery 对其进行了修改，但这是不可取的，因为菜单在加载后会跳转。

想法？

Answer 1

可能的解决方案

用于解释的彩色边框。
http://jsfiddle.net/jnG4q/

862px > 800px，所以它们放不下一行。查看示例的较小菜单:
http://jsfiddle.net/jnG4q/1

需要 HTML

<div id="outer-menu-bar" style="width:800px;height:32px;">  
    <div class="inner-menu" style="width:578px;height:32px;">Foo foo</div>
    <div class="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

额外的 CSS

#outer-menu-bar {
    text-align: center;
}

.inner-menu {
    display: inline-block;
}