html - 如何在 flexbox 中垂直对齐文本？

Question

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

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

我选择在这种情况下使用 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>

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属性适用于 flex 元素。除了您的 li 不是 flex 元素，因为它的父级 - ul - 没有 display: flex 或 display: inline- flex 已应用。

因此，ul不是flex容器，li也不是flex item，align-self没有任何作用。

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

由于 li 是一个 flex 容器，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>

codepen demo

---

从技术上讲，align-items 和 align-self 的工作原理如下...

align-items 属性(在容器上)设置默认值 align-self(在元素上)。因此，align-items: center 意味着所有的 flex 元素都将被设置为 align-self: center。

但您可以通过调整单个元素上的 align-self 来覆盖此默认值。

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

example

---

文本如何成为 flex 元素？

有些人可能想知道如何运行文本...

<li>This is the text</li>

是li的子元素。

原因是没有被内联元素显式包裹的文本在算法上被内联框包裹。这使它成为 匿名内联元素 和父级的子级。

来自 CSS 规范:

9.2.2.1 Anonymous inlineboxes

Any text that is directly contained inside a block container elementmust be treated as an anonymous inline element.

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

4. Flex Items

Each in-flow child of a flex container becomes a flex item, and eachcontiguous run of text that is directly contained inside a flexcontainer is wrapped in an anonymous flex item.

因此，li 中的文本是一个 flex 元素。