html - 如何在 flexbox 中居中放置内容

Question

我的元素有一个问题，内容在 flexbox 中没有垂直对齐。我们有一个流畅的响应页面，需要通过 % 将 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:中心

你会得到这样的东西:

.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;
}

两种方式都行:)