我正在为一家电影院建立一个预订网站。
我已经创建了一个导航栏，但无法集中选项。我尝试使用文本对齐：居中；但它没有起作用。
我只使用HTML和CSS来构建这个网站。
这是我第一次在这个平台上发帖，我不确定我分享的信息是否足够。
html {
background-color: white;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
max-width: 1042px;
margin: 10px auto;
}
nav {
width: 100%;
height: 60px;
background-color: rgb(230, 23, 57);
margin: auto;
text-align: center;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 7px 20px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgb(230, 23, 57);
padding: 10px;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 145px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 5px;
}
nav ul li ul li a:hover {
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags -->
<meta name="description" content="Carnival Cinema">
<meta name="keywords" content="cinema, indian movies, Carnival, Carnival Cinema">
<!-- CSS Links -->
<link rel="stylesheet" href="header.css">
<title>Carnival Cinema</title>
</head>
<body>
<header>
<h1>Welcome to Carnival Cinema!</h1>
<!-- Navigation Bar -->
<nav>
<ul>
<li><a href="#">Movies</a>
<ul>
<li><a href="#">Now Showing</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Corporations</a>
<ul>
<li><a href="#">Events</a></li>
<li><a href="#">Advertisement</a></li>
<li><a href="#">Vouchers</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<body>
</body>
<footer></footer>
</body>
</html>将display: flex;和justify-content: center;添加到nav。我建议阅读更多关于Flexbox的内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
尝试从nav ul中删除float
nav ul li {
display: inline-block;
list-style: none;
position: relative;
}
除此之外，我建议使用display:flex而不是float。更易于操作，并提供了更好的对齐、居中的可能性。。。但在这种情况下，display: inline-block是最简单的选择。
我还建议不要给nav一个固定的高度，而是在nav li a的margin上设置间距。就像这样，它总是垂直居中。