声明

Question

我正在创建自己的网站，我希望将此导航菜单放在首位，其中包含4个div，彼此链接到网站上的另一个地方，但我不知道如何将它们放在网站的中心。

这是我的代码;

x + 1

和样式表;

<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>

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

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

Answer 1

有很多东西需要完成......我使用较小的宽度nav div，从你的310px到150px，在JSFiddle上看到它。您可以将其更改为310px。然后，只需将nav的宽度从650px更改为您的nav div的至少4x宽度，以便将所有4个菜单项放在一行中。由于float: left;，您的所有4个div都是连续的，然后nav需要clear: both;。

我还建议您使用列表项（<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

Answer 2

声明

我知道这些建议都已经完成。但是，它们要么不完整，要么在文本对齐方法的情况下具有误导性。我本来希望对答案本身发表评论，但我目前还没有足够的声誉。

margin：auto

正如@Legionar所说，你可以对你的内部导航元素应用一个余量：auto。但是，这需要将固定宽度应用于div（＃b1，＃b2等）。如果这不是一个选项;

text-align：center

正如@Rajesh所说，您也可以在父容器上使用text-align center（在本例中为 nav 元素）。但是，他没有提到的是你还必须在你的div上设置display：inline-block以便工作 - 我还建议使用clear：两者都要确保他们不要似乎向左浮动;

nav{
  text-align: center;
}

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

Answer 3

您不能在段落标记中使用div，因为它们用于文本/内容。您还需要一个包装器div或容器，它将保存您的网站主体。 e.g

<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>

Answer 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;
}

它会将此样式应用于所有锚标记和div标记，并带有以下ID

。

在导航中居中多个div

4 个答案:

声明

margin：auto

text-align：center