无法让“对齐项目”在 flexbox 中工作答案

【问题标题】：Can't get 'align items' to work in flexbox无法让“对齐项目”在 flexbox 中工作
【发布时间】：2020-11-23 02:01:44
【问题描述】：

我正在尝试使用弹性框对齐分配给它的网格单元中心的“导航 ul”，但“对齐项目”属性似乎不想工作。我也尝试过使用“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>

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过两种方式执行此操作：在 nav 和 justify-content: center 上使用 flex 来对齐 center。或display gridnav

使用显示：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>

【讨论】：

@DavidSkx 很高兴听到这个消息。快乐编码:)

【解决方案2】：

如果您将 flex 属性应用于导航，并且还将 justify 内容属性应用于 css 导航选择器；它应该可以工作，请参见下文：

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

【讨论】：

没有。我正在尝试按原样移动图标，稍微向下移动到中间。
我试过了，它只是让图标靠得很近。