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

Question

我想使用 flexbox 垂直对齐 <li> 中的一些内容，但没有取得很大的成功。

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

我选择在这种情况下使用 flexbox，因为列表项高度将是动态的 % 。

 * {
  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>

原文由 styler 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是使用 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 属性适用于 _弹性项目_。 Except your li is not a flex item because its parent – the ul – does not have display: flex or display: inline-flex applied.

因此， ul 不是弹性容器， li 不是弹性项目， align-self 没有效果。

align-items 属性类似于 align-self ，除了它适用于 _弹性容器_。

由于 li 是一个弹性容器， align-items 可用于垂直居中子元素。

 * {
  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>

代码笔演示

---

从技术上讲，这里是 align-items 和 align-self 的工作原理……

align-items 属性（在容器上）设置默认值 align-self （在项目上）。因此， align-items: center 意味着所有弹性项目将被设置为 align-self: center 。

但是您可以通过调整单个项目的 align-self 来覆盖此默认值。

例如，您可能需要等高列，因此容器设置为 align-items: stretch 。但是，必须将一项固定到顶部，因此将其设置为 align-self: flex-start 。

例子

---

文本如何成为弹性项目？

有些人可能想知道一段文字如何……

 <li>This is the text</li>

是 li 的子元素。

原因是未被行内级元素显式包装的文本通过算法被行内框包装。这使它成为 匿名内联元素 和父元素的子元素。

从 CSS 规范：

9.2.2.1 匿名行内框

任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。

flexbox 规范提供了类似的行为。

4.弹性项目

弹性容器的每个流入子元素都成为一个弹性项目，并且直接包含在弹性容器内的每个连续文本运行都被包裹在一个匿名弹性项目中。

因此， li 中的文本是一个弹性项目。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议