如何在弹性框中将内容居中

Question

我在项目中遇到了一个问题，即内容未在弹性框中垂直对齐。我们有一个流畅的响应页面，需要通过 %'s 将 flexbox 中的所有项目居中。在下面的示例中，我们设置了一个固定的像素高度，以便您可以使用它。

我已经尝试了好几个小时了很多不同的方法..

body{
  margin:0px auto;

}
/* top bar navigation */
.topBoxNav {
  background:red;
  padding: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 50px;
  color: white;
  font-weight: bold;
  font-family: 'League Gothic';
  font-size: 1.5em;
  text-align: center;
}

.topBoxNav li {
  box-sizing: border-box;
  border: 1px solid white;
  width: 100%;
  height: 100%;
}

.topBoxNav a {
  text-decoration: none;
  color: white;
}

HTML：

<nav class="" alt="top Nav">
  <ul class="topBoxNav">
    <li><a href="">Box1</a></li>
    <li><a href="">Box2</a></li>
    <li><a href="">Box3</a></li>
  </ul>     
</nav>

示例：

http://codepen.io/anon/pen/iwDdy

Answer 1

首先，请意识到具有display: flex 属性的是您的ul，而不是您的li 元素，因此您有两种选择：

1) 给你的li 元素display: flex 并添加align-items: center 和justify-content: center

你会得到这样的东西：

.topBoxNav li {
  box-sizing: border-box;
  border: 1px solid white;
  width: 100%;
  height: 100%;

  display: flex;

  align-items center
  -moz-align-items center
  -ms-flex-align center
  -webkit-align-items center

  justify-content center
  -moz-justify-content center
  -ms-flex-pack center
  -webkit-justify-content center
}

2) 给你的li 元素line-height 等于height，在本例中为50px 和vertical-align: middle。

你会得到这样的东西：

.topBoxNav li {
  box-sizing: border-box;
  border: 1px solid white;
  width: 100%;
  height: 100%;
  align-items: center;
  -webkit-align-items: center;
  vertical-align: middle;
  line-height: 50px;
}

这两种方法都行:)