html - 无法让 'align items' 在 Flexbox 中工作

我正在尝试使用 flexbox 将“nav ul”对齐到分配给它的网格单元的中心，但“align-items”属性似乎不起作用。我也尝试过使用“justify-content”，但这也不起作用。我缺少什么？提前致谢。

CSS / HTML

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

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas: "imgTitle main" "nav main" "sidebar main" "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

最佳答案

您可以通过两种方式执行此操作:在 nav 上使用 flex 和 justify-content: center 来对齐 center.或在导航上显示网格

使用显示:flex

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

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas: "imgTitle main" "nav main" "sidebar main" "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: flex;
  justify-content: center;
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}

<body>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

使用显示:网格

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

a {
  color: white;
}

.siteContainer {
  height: 100vh;
  display: grid;
  grid-template-columns: 15% auto;
  grid-template-rows: 25% 6% 60% auto;
  grid-template-areas:
    "imgTitle main"
    "nav main"
    "sidebar main"
    "sidebar footer"
}

#imgTitle {
  grid-area: imgTitle;
  background-color: rgb(43, 43, 43);
  font-family: 'Indie Flower', cursive;
  text-align: center;
}

#imgTitle img {
  width: 50%;
  border-radius: 50%;
}

nav {
  grid-area: nav;
  background-color: rgb(53, 53, 53);
  display: grid;
  
}

nav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.siteContainer main {
  grid-area: main;
  background-color: rgb(73, 73, 73);
}

.siteContainer section {
  grid-area: sidebar;
  background-color: rgb(63, 63, 63);
}

.siteContainer footer {
  grid-area: footer;
  background-color: rgb(43, 43, 43);
}

<body>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>

  <div class="siteContainer">
    <div id="imgTitle">
      <img src="./img/david.png">
      <h1>First Last</h1>
      <h4>Artist | Programmer</h4>
    </div>
    <nav>
      <ul>
        <li><a href="#"><i class="fas fa-home"></i></a></li>
        <li><a href="#"><i class="fas fa-cube"></i></a></li>
        <li><a href="#"><i class="fas fa-user"></i></a></li>
        <li><a href="#"><i class="fas fa-phone"></i></a></li>
      </ul>
    </nav>
    <section>Blank</section>
    <main>Main</main>
    <footer>Footer</footer>
  </div>

</body>

关于html - 无法让 'align items' 在 Flexbox 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63222058/

html - 无法让 'align items' 在 Flexbox 中工作

上一篇：amazon-web-services - terraform .12 - 添加多个内联策略

下一篇：Corda - Crypto.doVerify 永远不会返回 false