Question

我希望徽标和导航链接水平居中。右侧空间过多。解决此问题的最佳方法是什么？

在nav元素上尝试了内联块。尝试使用文本对齐而不是对齐项。

我希望内容的中心在两侧均等，但右侧的间隔更大。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: black;
  font-family: 'Poppins', sans-serif;
}

.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

<header>
  <nav>
    <div class="logo">
      <h4>Great Falls</h4>
    </div>
    <ul class="nav-links">
      <li><a href="#">Home</li>
      <li><a href="#">Plan Your Visit</li>
      <li><a href="#">Learn More</li>
      <li><a href="#">Contact</li>
    </ul> 
  </nav>
</header>

Answer 1

您的CSS代码中有此代码

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

默认情况下，柔性方向设置为行。因此，对齐内容是水平的，对齐项是垂直的。在这段CSS中，您将所有子项垂直居中放置，但将子项水平放置在水平方向上。

您应将 justify-content （正当内容）设置为 center （中心），以便对齐以行方向为中心的项目。

Answer 2

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

应该工作

这也是一支电笔https://codepen.io/anon/pen/mYvVgL?editors=1100

为什么我的导航栏不能在CSS中居中？

2 个答案: