如何垂直对齐FlexBox中的文本？

Question

我想使用flexbox来垂直对齐

中的一些内容，但没有取得很大的成功。

我在网上查了一下，很多教程实际上都使用了包装器div，它从父级的flex设置中获得align-items:center，但我想知道是否可以去掉这个附加元素？

我选择在此实例中使用flexbox，因为列表项高度将是动态的%。

null

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

null

Answer 1

最好的方法是在flexbox中嵌套一个flexbox。您所要做的就是给孩子align-items:center。这将垂直对齐其父文本内部的文本。

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

Answer 2

不使用align-self:center，而使用align-items:center。

不需要更改flex-direction或使用text-align。

下面是您的代码，只需做一个调整，就可以使其正常工作：

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

align-self属性适用于flex项。但您的LI不是flex项，因为它的父项UL没有应用display:flex或display:inline-flex。

因此，ul不是flex容器，li不是flex项，align-self没有任何影响。

align-items属性与align-self类似，只是它适用于flex容器。

由于li是一个flex容器，因此可以使用align-items将子元素垂直居中。

null

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>