将 2 个不同大小的 div 置于主/父 div 中居中

Question

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

大菜单：

<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%;保证金：自动； } 如 如何水平居中

中所述在另一个

? 中，但一个菜单大于 50%，因此会被裁剪。小的悬挂在左侧 20 像素处。在原型期间，我们使用 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;
}

Answer 2

我认为 Smamatti 有一个很好的解决方案。我想出了或多或少相同的东西，唯一的区别是我删除了所有内联样式。

http://jsfiddle.net/S1l3/YVdFq/4/

HTML：

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

CSS：

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

.inner-menu
{
    display:inline-block;
    background:#ccc;
}