为什么我的项目在 Flexbox 导航栏中没有水平对齐？答案

【问题标题】：Why are my items not aligning horizontally in Flexbox navbar?为什么我的项目在 Flexbox 导航栏中没有水平对齐？
【发布时间】：2023-03-31 05:07:01
【问题描述】：

我一直在玩 Fireship 频道的 Youtube 视频“带有 CSS 的动画响应式导航栏”中的导航栏。我试图让导航栏中的项目水平对齐到中心。 HTML 具有以下结构：

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Home</span>

我的 CSS 是：

.navbar {
    position: fixed;
    background-color: var(--bg-primary);
    transition: width 600ms ease;
    overflow: auto;
  }
  
  .navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
  }
  
  .nav-item {
    width: 100%;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    height: 5rem;
    color: var(--text-primary);
    text-decoration: none;
    filter: grayscale(100%) opacity(0.7);
    transition: var(--transition-speed);
  }

据我了解，设置以下项目应水平居中：

将 .navbar-nav 设置为 display:flex
将 .navbar-nav 设置为 flex-direction:column
将 .navbar-nav 设置为 align-items center；

但是，我最终得到的是以下内容：

非常感谢任何帮助。

【问题讨论】：

你在使用 Bootstrap 吗？
@BOZ 不，我不是。怎么会？
父元素.navbar-nav { 设置为列，但内部元素仍处于行状态。为此，.nav-link { 类应该是justify-content: center; 你会尝试添加它吗？如果你愿意，我可以举例说明。
下次提供更多 HTML 会很有帮助。
@MongoosePainter 请提供完整的 html。

标签： html css flexbox

【解决方案1】：

正如this link（w3 学校）所说，试试flex-direction: row。这是因为flex-direction: column 垂直对齐而不是水平对齐

【讨论】：

【解决方案2】：

将flex-direction: column; 更改为flex-direction: row;

row 将在弹性框中水平对齐项目，而 column 将项目垂直对齐作为原始结果。

html { /* added these rules to better match OG styles in provided picture */
  background-color: #223; color: #dde; font-family: Arial; padding-left: 2rem;
}
.navbar { position: fixed; transition: width 600ms ease; overflow: auto; }
.navbar-nav {
  list-style: none; padding: 0;
  margin: 0; display: flex;
  flex-direction: row; /* changed "column" to "row" */
  align-items: center; height: 100%;
}
.nav-item { width: 100%; }
.nav-link {
  display: flex; justify-content: center; align-items: center; height: 5rem;
  padding: 1rem; /* added padding so you can see nav items better */
  color: var(--text-primary); text-decoration: none;
  filter: grayscale(100%) opacity(0.7);
}
.logo { position: relative; } /* This and below to add logo next to nav items */
.logo::before { 
  display: block; transform: scale( 1.25 ); position: absolute; 
  top: 3rem; width: 1rem; height: 1rem; 
  background-image: url( "https://i.stack.imgur.com/ejyfV.png" );
  background-size: 6rem; background-position: -0.06rem -1rem;
  content: "";
}
.logo:nth-of-type( 1 )::before { background-image: none; }
.logo:nth-of-type( 3 )::before { background-position: -0.06rem -2.85rem; }
.logo:nth-of-type( 4 )::before { background-position: -0.06rem -4.7rem; }
.logo:nth-of-type( 5 )::before { background-position: -0.06rem -6.55rem; }

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Home</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">About</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Work</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Pricing</span>
      </a>
    </li>
    <li class="logo">
      <a href="#" class="nav-link">
        <span class="link-text logo-text">Contact</span>
      </a>
    </li>
  </ul>
</nav>

【讨论】：