无法集中导航栏 - 编程之家

如何解决无法集中导航栏

我正在为一家电影院建立一个预订网站。

我创建了一个导航栏，但无法集中选项。我尝试使用 text-align: center;但它没有用。

我仅使用 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,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>

解决方法

试试从float

中删除nav ul

    nav ul li {
    display: inline-block;
    list-style: none;
    position: relative;
}

除此之外，我建议使用 display: flex 而不是 float。更容易处理并为对齐、居中提供更好的可能性......但在这种情况下，display: inline-block 是最简单的选择。

而且我还建议不要给 nav 一个固定的高度，而是在 margin 的 nav li a 上设置间距。像这样它也总是垂直居中。

将 display: flex; 和 justify-content: center; 添加到 nav。我建议阅读有关 Flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/