css - 对齐元素属性在 CSS 网格中不起作用

Question

我正在尝试使用 CSS 网格来对齐将成为导航栏一部分的元素。

你可以在这里看到:https://jsfiddle.net/nodpekar/82p0x4hw/5/

我不知道为什么下面的代码没有将 navbar-items 类中的元素居中对齐。

body,
html {
  height: 100%;
  margin: 0;
}

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

Answer 1

不使用 justify-content: center，而是使用 justify-items: center。就是这样。

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  /* justify-content: center; */
  justify-items: center; /* new */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

如果您使用的是 flexbox 而不是网格，那么您的对齐代码就可以工作:

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: flex; /* adjustment */
  flex-direction: column; /* new */
  align-items: center;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

造成这种差异的原因是由于布局结构的差异。

• 在 flexbox 中，justify-content 直接应用于 flex 元素。

• 在网格中，justify-content 适用于网格列 ( more details )。

• 在 flexbox 中，没有 justify-items 属性 ( more details )

• 在网格中，justify-items 应用于网格项 ( more details )

因此，要使您的布局正常工作，请在网格中使用 justify-items 并在 flex 中使用 justify-content。