使用弹性框垂直居中文本，而不是创建我想要的结果

Question

我需要帮助，我不太确定如何用语言解释我的问题，所以这里有一张图片。 这就是它的样子

这就是我希望它看起来像的样子（来自另一个网站）不是设置全部样式，只是居中样式。

我希望我的链接像这样居中：主页 关于史宾沙 希尔特布兰德 服务联系方式

这是我的 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;
     }

网页结构：

<!-- 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>

Answer 2

似乎答案已经在另一篇文章中给出了。 在弹性框中垂直居中文本

#first { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
#second { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

这是帖子中给出的jsfiddle。

Answer 3

你不需要那么多代码 - 这就足够了：

http://jsfiddle.net/zfg2sg9L/1/

<div id="container">
    <div class="x">
        first box
    </div>
    <div class="x">
        second box
    </div>
    <img src="http://placehold.it/100x80">
    <div class="x">
       third box
    </div>
    <div class="x">
        fourth box
    </div>
</div>

.CSS：

#container {
    display: flex; 
    justify-content: center;   
}
.x {
    margin: auto 20px;
}

容器被justify-content: center，使整个事情居中。弹性项目得到margin: auto 20px;：上边距和下边距的auto将它们垂直居中，20px的左右边距在项目之间创建一些距离。这就是它真正需要的。