CSS，中心菜单

Question

我在一个div里面有3个div。 - 标题 我想将菜单居中，其他div必须左右放置。

Click here to see link.

它是建立这样的：

<header> 
<div id="header-left"></div><div id="menu"></div><div id="header-right"></div> 
</header> 

只是似乎无法得到它的工作。 谢谢！

Answer 1

我已经做情侣修订：

#menu { 
    /*margin-left: 80px; removed */ 
} 

#menu { 
    border-radius: 3px 3px 3px 3px; 
    /*float: left; removed */ 
    margin: 27px auto 0; /* changed */ 
    width: 33%; 
    z-index: 122; 
} 

这会帮助你。

Answer 2

由于您希望在窗口缩小时调整元素大小，所以最好的解决方案就是使用flexbox。我连接了一篇文章给你：here

Answer 3

你可以很容易地做到这一点与制作heading行为就像一个表：

<header> 
    <div>left</div> 
    <div>center</div> 
    <div>right</div> 
<header> 

header { 
    background: green; 
    display: table; 
    width: 100%; 
} 
header div { 
    display: table-cell; 
} 
header div:nth-child(1) { 
    background: yellow; 
    width: 100px; 
} 
header div:nth-child(2) { 
    background: lightblue; 
} 
header div:nth-child(3) { 
    background: blue; 
    width: 100px; 
} 

JSFiddle demo

两个外部divs有一个固定的宽度，中间的一个将其余的 空间。 希望这可以帮助你。

[编辑] 为了中心菜单将text-align: center添加到第二个div。