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

两种方式都有效：）

如何将内容集中在flexbox中

1 个答案: