[我试图将导航栏居中在页面中间，而不是在左边。我尝试在CSS中使用float: center;而不是使用它，但这没有用。对于这个菜鸟的任何帮助，将不胜感激。
.nav {
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.nav a {
float: none;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "nav">
<a href = "#">Home</a>
<a href = "#">About</a>
<a href = "#">Tutorials</a>
<a href = "#">Contact</a>
</div>
</body>
</html>首先，请记住float存在，可以将元素放置在其容器的左侧或右侧，因此根本没有float属性。如今，也使用float: center;来处理DOM元素并不是一种正确的方法，因为CSS3中几乎弃用了它的用法。
有多种方法可以做到这一点。
float。为了使这项工作有效，您应该将text-align: center;标记中的text-align: center;移动到媒体查询中（因为display: block默认为内联显示），以使其在宽屏中显示为一行，然后将[ C0]从您的a元素到其父元素。<a>text-align: center;<a>。要使用flexbox，您要做的就是将.nav {
overflow: hidden;
text-align: center;
}
.nav a {
color: black;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.nav a {
display: block;
width: 100%;
}
}分配给父元素并使他们的孩子遵循flex规则，然后在中心指定<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Tutorials</a>
<a href="#">Contact</a>
</div>
</body>
</html>和flexbox使其孩子居中。然后，您需要在媒体查询中使用display: flex;指定flex元素的方向。justify-contentjustify-content我从flex-direction CSS中删除了.nav {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.nav a {
color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.nav {
flex-direction: column;
}
.nav a {
display: block;
width: 100%;
}
}和<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Tutorials</a>
<a href="#">Contact</a>
</div>
</body>
</html>，并将.nav {
overflow: hidden;
display: flex;
justify-content: center;
}
添加到.nav {
overflow: hidden;
display: flex;
justify-content: center;
}
.nav a {
color: black;
padding: 10px;
text-decoration: none;
}
@media screen and (max-width: 600px) {
.nav a {
float: none;
width: 100%;
}
}。
我也将<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Tutorials</a>
<a href="#">Contact</a>
</div>
</body>
</html>更改为float: left;，但这仅取决于您想要的样式。
text-align: center;
.nav a {...}text-align: center;将链接中的.nav移动到其父元素，删除浮点并使链接display: block;通过display: inline-block;使其居中，>
Working CodePen.nav { overflow: hidden; text-align: center; } .nav a { display: inline-block; color: black; text-align: center; padding: 10px; text-decoration: none; } @media screen and (max-width: 600px) { .nav a { float: none; width: 100%; } }
附加说明：有no
<div class = "nav">
<a href = "#">Home</a>
<a href = "#">About</a>
<a href = "#">Tutorials</a>
<a href = "#">Contact</a>
</div>...将此代码添加到CSS文件中的#nav选择器：