【问题标题】：Center multiple divs inside a nav在导航中居中多个 div
【发布时间】：2015-09-23 12:14:15
【问题描述】：

我正在创建自己的网站，我希望在顶部有这个导航菜单，其中包含 4 个 div，每个 div 都链接到网站上的另一个位置，但我无法弄清楚将它们放在网站的中心。

这是我的代码；

<html>
<head>
<link rel="stylesheet" href="indexc.css">
<title>
Title
</title>
</head>
<body>
<p id="balk">
<nav><b>
<div id="b1"><a href="html/" style="text-decoration:none;color:white;"><h2>About</h2></a></div>
<div id="b2"><a href="html/" style="text-decoration:none;color:white;"><h2>Videos</h2></a></div>
<div id="b3"><a href="html/" style="text-decoration:none;color:white;"><h2>History</h2></a></div>
<div id="b4"><a href="index.html" style="text-decoration:none;color:white;">     <h2>Home</h2></a></div>
</b></nav>
</p>
</body>
</html>

和样式表；

body {font-family:sans-serif;background-image: url("pictures/rain.jpg");}
#b1 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;}
#b2 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:323px;}
#b3 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:637.5px;}
#b4 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:952px;}

现在导航菜单在左侧，但我希望它位于页面的正中间，无论屏幕大小如何。

无论如何，如果你能帮助我，谢谢！

【问题讨论】：

为什么不使用列表项
我已经对我的答案进行了编辑...如果它有效，请告诉我。

标签： html css nav

【解决方案1】：

您不能在段落标签中使用 div，因为它们用于文本/内容。您还需要一个包装器 div 或一个容器来保存您的网站正文。例如

<html>
<head>
<link rel="stylesheet" href="indexc.css">
<title>
Title
</title>
<style>
.container{ width:900px; margin:auto; float:none;}
</style>
</head>
<body>

<div class="container">
<nav>
<div id="b1"><a href="html/" style="text-decoration:none;color:white;"><h2>About</h2></a></div>
<div id="b2"><a href="html/" style="text-decoration:none;color:white;"><h2>Videos</h2></a></div>
<div id="b3"><a href="html/" style="text-decoration:none;color:white;"><h2>History</h2></a></div>
<div id="b4"><a href="index.html" style="text-decoration:none;color:white;">     <h2>Home</h2></a></div>
</nav>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

免责声明

我知道这两个建议都已经提出。但是，它们要么不完整，要么在 text-align 方法的情况下具有误导性。我更愿意自己评论答案，但我目前没有足够的声誉。

边距：自动

正如@Legionar 所说，您可以将 margin: auto 应用于您的内部导航元素。但是，这需要将固定宽度应用于您的 div（#b1、#b2 等）。如果这不是一个选项；

文本对齐：居中

正如@Rajesh 所说，您还可以在父容器（在本例中为 nav 元素）上使用 text-align center。但是，他没有提到的是，您还必须在您的 div 上设置 display: inline-block 才能使其正常工作-我还建议使用 clear: both 以确保它们看起来不会向左浮动；

nav{
  text-align: center;
}

#b1,#b2,#b3,#b4{
 display: inline-block;
 clear: both;
}

【讨论】：

【解决方案3】：

确实有很多事情要做...我为nav div 使用了较小的宽度，从你的310px 到150px，以便在JSFiddle 上看到它。您可以将其烘焙更改为 310 像素。然后只需将 nav 的宽度从 650 像素更改为您的 nav div 的至少 4 倍宽度，以将所有 4 个菜单项放在一行中。因为float: left; 和nav 需要有clear: both;，所以你所有的4 个div 都在一行中。

我还建议您使用列表项 (<ul><li>...</li><li>...</li>...</ul>)。

HTML：

<p id="balk">
    <nav>
        <div id="b1"><a href="html/"><h2>About</h2></a></div>
        <div id="b2"><a href="html/"><h2>Videos</h2></a></div>
        <div id="b3"><a href="html/"><h2>History</h2></a></div>
        <div id="b4"><a href="index.html"><h2>Home</h2></a></div>
    </nav>
</p>

CSS：

body {
    font-family:sans-serif;
    background-image: url("pictures/rain.jpg");
}

nav {
  width: 650px;
  margin: 0 auto;
}

nav:after {
    clear: both;
}

nav div {
    border-style: solid;
    border-color:#7f7f7f;
    width:150px;
    text-align:center;
    padding-top:3px;
    padding-bottom:3px;
    background-color:#7f7f7f;
    opacity:0.8;
    float:left;
}

nav div>a {
    text-decoration: none;
    color: white;
}

See DEMO on JSFiddle

【讨论】：

【解决方案4】：

在这种情况下只需使用 text-align

<nav style="text-align:center;"><b>
  //All div here
</b></nav>

在你的样式表中你可以这样做，而不是每次都在 Anchor 标签中给出

a
{
 text-decoration:none;
 color:white;
 text-align:center;
}

#b1,#b2,#b3,#b4
{
 text-align:center;
}

它会将此样式应用于所有具有以下 id 的锚标签和 div 标签

【讨论】：