Question

我已经在stackoverflow上尝试了很多解决方案（margin:0 auto; text-align，...），但这些解决方案都没有工作。
我试图将导航菜单（div）置于导航栏中间，但到目前为止我一直无法做到这一点。我用margin-left:20%成功地完成了它，但是这导致我最小化窗口，按钮落在其他人之下并破坏整个网页。

body{
	margin:0;
}

header{
	height:2.5vw;
	width:100%;
	background-color:#2f2f2f;
	box-shadow: 0px 5px 5px #111111;  /* #888888 */
}
nav{
	/* margin-left:20%;
	margin-right:20%; */
}
li{
	display:flex;
	height:2.5vw;
	width:20%; /* 33.2% 19.9vw */
	float:left;
	border-left-color:#000000;
	border-left-style:solid;
	border-left-width:thin;
	border-right-color:#000000;
	border-right-style:solid;
	border-right-width:thin;
	text-align:center;
	justify-content: center;
	flex-direction:column;
	color:#5F5F5F;
	font-size:1vw;
}
li:hover{
	background-color:#505050;
}
li:first-child{
	border-right:none;
}
li:last-child{
	border-left:none;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header><nav><li class=but>Home</li><li class=but>Projects</li><li class=but>Contact</li></nav></header>
</body>
</html>

Answer 1

现在，您的nav元素的宽度为100％，因为默认情况下所有块级元素都会执行。因此，没有空间可以抵抗双方的中心。

所以，你需要给它一个width。然后，以它为中心，给它一个margin-left:auto; margin-right:auto;

通过使宽度（例如50％）使您的边距空间增大并向上推动视口的两侧。

Answer 2

您可以使用 CSS Flexbox 。

使您的<nav>弹性框像：

nav {
  display: flex;
  justify-content: center;
}

＆＃13;

body{
	margin:0;
}

header{
	height:2.5vw;
	width:100%;
	background-color:#2f2f2f;
	box-shadow: 0px 5px 5px #111111;  /* #888888 */
}
nav{
	display: flex;
    justify-content: center;
}
li{
	display:flex;
	height:2.5vw;
	width:20%; /* 33.2% 19.9vw */
	float:left;
	border-left-color:#000000;
	border-left-style:solid;
	border-left-width:thin;
	border-right-color:#000000;
	border-right-style:solid;
	border-right-width:thin;
	text-align:center;
	justify-content: center;
	flex-direction:column;
	color:#5F5F5F;
	font-size:1vw;
}
li:hover{
	background-color:#505050;
}
li:first-child{
	border-right:none;
}
li:last-child{
	border-left:none;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header><nav><li class=but>Home</li><li class=but>Projects</li><li class=but>Contact</li></nav></header>
</body>
</html>

＆＃13;

希望这有帮助！

Answer 3

只需给它一个width，然后以margin：auto

为中心

nav{
    width:1000px;
    margin:auto;
}

将DIV置于另一个DIV中

3 个答案: