[我调整页面大小以查看是否可以在手机上使用时，导航栏的主页部分无法正确居中...它无法正确对齐非常令人沮丧，那么我该如何解决呢？如果您确实阅读并回复此内容，请先谢谢您。该网站不会让我张贴此，除非我有更多的细节，以便aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"> <!-- Set character set -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Makes the website work on all devices and screen resolutions -->
<link rel="stylesheet" href="style.css">
<title>Roan Taylor's Portfolio</title>
</head>
<!-- Navigation bar -->
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar" id="navbar">
<li>"Strive not to be a success, but rather of value."-A.E.</li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
<!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a> -->
</div>
<hr>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("navbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
/* Add a black background color to the top navigation */
.navbar {
background-color: white;
overflow: hidden;
margin-left: 1.2%;
margin-right: 1.2%;
margin-top: 1%;
margin-bottom: 1.5%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
width: 13%;
text-decoration: none;
font-size: 2vw;
}
.navbar li {
float: right;
display: block;
color: black;
text-align: center;
width: 45%;
text-decoration: none;
font-size: 2vw;
font-style: italic;
}
/* Change the color of links on hover */
.navbar a:not(.active):hover {
color: rgb(0, 162, 200);
transition: 0.75s;
}
/* Add an active class to highlight the current page */
.navbar a.active {
color: rgb(51, 51, 255);
}
/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 700px) {
.navbar a {
display: none;
}
.navbar li {
float: left;
font-size: 4vw;
width: 75%;
}
.navbar a.icon {
float: right;
display: block;
width: 25%;
font-size: 8vw;
}
}
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive a.icon {
position: relative;
}
/* Why won't home centre here??? */
.navbar.responsive a:not(.icon) {
float: none;
display: block;
text-align: center;
font-size: 7vw;
width: 100%;
}
}
</style>
<body>
</body>
</html>您应将所有列表项放入一个容器中，然后应用flex属性：
<div class="container">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
}