html - 使用 Flexbox 垂直居中文本，而不是创建我想要的结果

Question

我需要这方面的帮助，我不太确定如何用文字解释我的问题，所以这里有一张图片。 this is what it looks like

this is what I want it to look like (from another website)不是所有样式，只是居中样式。

我希望我的链接像这样居中:主页 关于 SPENCER HILTBRAND 服务 联系方式

这是我的 CSS

    /* Navigation */

    .navigation {
      background: #fff;
      width: 100%;
      height: 156px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5);
     }

     .nav-item {
      text-decoration: none !important;
      font-size: 35px;
      text-transform: uppercase;
      transition: 0.3s color;
      padding: 20px;
     }

HTML 结构:

<!-- Header -->
<div class="container">
  <nav class="navigation">
    <ul>
      <a class="nav-item">Home</a>
      <a class="nav-item">About</a>
      <a class="brand"><i class="orange">Spencer</i> Hiltbrand</a>
      <a class="nav-item">Services</a>
      <a class="nav-item">Contact</a>
    </ul>
  </nav>
</div>

Answer 1

正如我所说，您可以使用 margin:auto;从您的 HTML 中我们可以看出哪里出了问题:这就是孤独 <ul>标签:

   /* Navigation */
   .navigation {
     background: #fff;
     width:100%;
     height: 156px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5);
     /* demo purpose : flex-wrap:wrap or min-width */
    min-width:1000px;
   }
   .nav-item {
     text-decoration: none !important;
     font-size: 35px;
     text-transform: uppercase;
     transition: 0.3s color;
     padding: 20px;
   }
   .nav-item,
   .brand {
     margin: auto 0;
   }
   .brand {
     font-size: 50px;
     text-transform: uppercase;
     font-weight: bold;
   }
   .orange {
     color: orange;
   }

<!-- Header -->
<div class="container">
  <nav class="navigation">
    <a class="nav-item">Home</a>
    <a class="nav-item">About</a>
    <a class="brand"><i class="orange">Spencer</i> Hiltbrand</a>
    <a class="nav-item">Services</a>
    <a class="nav-item">Contact</a>
  </nav>
</div>