Html 将多个div置于导航内的中心_Html_Css_Nav

Html 将多个div置于导航内的中心

html css

Html 将多个div置于导航内的中心,html,css,nav,Html,Css,Nav,我在创建自己的网站，我想在上面有一个导航菜单，其中包含4个div，每个div都链接到网站上的另一个地方，但我不知道如何将它们放在网站的中心这是我的密码 <html> <head> <link rel="stylesheet" href="indexc.css"> <title> Title </title> </head> <body> <p id="balk"> <nav><b

我在创建自己的网站，我想在上面有一个导航菜单，其中包含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>

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

不管怎样，如果你能帮我，谢谢你

在这种情况下只需使用文本对齐即可

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

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

确实有很多事情要做。。。我使用了较小的宽度作为

导航div

，从您的310px到150px，以便在JSFIDLE上看到它。您可以将其更改为310px。另外，只需将

nav

的宽度从650px更改为您的

nav div

的至少4x宽度，即可将所有4个菜单项放在一行中。由于

float:left，所有4个div都排在一行中

和

nav

需要有

清除：两者都有
我还建议您使用列表项（.
.
..
）
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>

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

免责声明
我知道这两个建议都已经提出了。但是，它们要么不完整，要么在文本对齐方法中具有误导性。我宁愿自己对答案发表评论，但我目前没有足够的声誉
保证金：自动
正如@Legionar所说，你可以在你的内部导航元素上加上一个边距：auto。但是，这需要对div应用一个固定的宽度（b1、b2等）。如果这不是一个选项
文本对齐：居中
正如@Rajesh所说，您还可以在父容器（在本例中为nav元素）上使用文本对齐中心。然而，他没有提到的是，你还必须在你的div上设置display:inline块，这样才能工作——我还建议你使用clear:tware，以确保它们看起来不会向左浮动
nav{
  text-align: center;
}

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

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

标题
.container{宽度：900px；边距：自动；浮点：无；}
为什么不使用列表项我已经对我的答案进行了编辑。。。让我知道它是否有效。
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;
}

nav{
  text-align: center;
}

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

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