在另一个 DIV 中居中 DIV

Question

我已经在 Whosebug 上尝试了很多解决方案（margin:0 auto; text-align，...），其中 none 还有效。
我正在尝试将导航菜单 (div) 置于导航栏中间，但直到现在我还无法做到这一点。我用 margin-left:20% 成功做到了，但这是因为当我最小化 window 时，按钮掉在其他按钮下面并破坏了整个网页。

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

现在，您的导航元素的宽度为 100%，默认情况下所有块级元素都是如此。所以没有空间向上推到两侧使其居中。

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

通过设置宽度（比如 50%），可以让边距有增长空间并向上推到视口的两侧。

Answer 2

您可以使用 CSS Flexbox.

让你的 <nav> flexbox 像：

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

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

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

只需给它一个 width 然后用 margin:auto 居中

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

在另一个 DIV 中居中 DIV

Centering DIV inside another DIV

html

css

center