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％;保证金：自动; }如How to horizontally center a <div> in another <div>?中所述，但是一个菜单大于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;
}

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

2 个答案:

可能的解决方案

通缉HTML

附加CSS