如何在弹性项目中垂直居中文本？

Question

我只想让文字像这样：

display: table-cell;
vertical-align: middle;

但是使用弹性盒子

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
}

.box div.C {
  flex: 1 1 auto;
}

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

Answer 1

div {
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  height: 200px;
}

.box div {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
  display: flex;            /* NEW */
  align-items: center;      /* NEW */
}

.box div.C {
  flex: 1 1 auto;
}

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
</div>

说明

flex formatting context的范围仅限于父子关系。 flex 容器的后代不参与 flex 布局，并且会忽略 flex 属性。

在您的布局中，.box 元素是弹性容器（父元素），div 元素是弹性项目（子元素）。因此，justify-content、align-content 和 align-items 规则适用于 div。

不过，正文又低了一层。它不属于这个 flex 容器的范围。文本被认为是弹性项目的子元素/弹性容器的孙元素。因此，文本不能接受 flex 属性。

在 CSS 中，未明确由元素换行的文本由行内框通过算法换行。这使它成为一个 匿名内联元素 和父元素的子元素。

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

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

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

4. Flex Items

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

因此，文本是弹性项目的子元素。

因此，您需要做的就是将弹性项目制作成弹性容器。然后，您可以重复居中规则以垂直 and/or 水平居中文本。

如何在弹性项目中垂直居中文本？

How to center text vertically in a flex item?

html

css

centering

flexbox

说明