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

Posted 2023-03-05

【中文标题】如何在弹性项目中垂直居中文本？

【英文标题】：How to center text vertically in a flex item?

【发布时间】：2017-11-28 07:06:15

【问题描述】：

我只希望文本是这样的：

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>

【参考方案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 属性。

在 CSS 中，未被元素显式包裹的文本在算法上由内联框包裹。这使它成为 匿名内联元素 和父级的子级。

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

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

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

4. Flex Items

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

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

所以你需要做的就是把弹性项目变成弹性容器。然后，您可以重复居中规则以垂直和/或水平居中文本。

【讨论】：

我非常喜欢这个解决方案，因为它仍然允许拉伸内部 div。

附带说明，如果文本包含标签，它会被拆分为多个（匿名）弹性项目，这可能导致意外行为（即，在有标签的地方增加/减少空白）。因此，在这种情况下，必须确保将整个文本包装在例如<p></p>.