css - CSS，中心菜单

Question

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

点击这里查看链接。

它是这样构建的：

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

只是似乎无法让它工作。谢谢！

Answer 1

由于您希望在窗口缩小时调整元素的大小，因此最好的解决方案是使用 flexbox。我正在为您链接一篇文章：这里

Answer 2

我做了几个修改：

#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 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 演示

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

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