如何在弹性框中垂直对齐文本？答案

【问题标题】：How to vertically align text inside a flexbox?如何在弹性框中垂直对齐文本？
【发布时间】：2020-05-17 17:45:47
【问题描述】：

我想使用 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以将ul 和li 显示更改为table 和table-cell。然后，vertical-align 将为您工作：

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK

【讨论】：

在您在其中添加另一个列表项之前效果很好。
是的......但从未提及
您已将高度切换为 ul 而不是 li？每个 li 的高度都是动态的，所以我害怕这不是我可以使用的东西
@LcSalazar 如果您只想拥有一项，通常不会使用列表。这就是 div 的用途。
再次正确...但我并不是说这是完美的场景。我刚刚发布了一个可以直接回答问题的解决方案。我希望这些信息可能对阅读它并有另一种情况的其他人有用......

【解决方案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 属性适用于 弹性项目。除了您的 li 不是弹性项目，因为它的父级 - ul - 没有应用 display: flex 或 display: inline-flex。

因此，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>

codepen demo

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

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

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

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

example

文本如何成为弹性项目？

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

<li>This is the text</li>

是li的子元素。

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

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

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

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

4. Flex Items

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

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

【讨论】：

我喜欢align-items: baseline。适用于来自不同 unicode 字符等的不同高度。
感谢您解释并链接到匿名内联框的概念...确实有助于阐明为什么您可以通过反复试验实现的某些效果以它们的方式工作。
别忘了删除任何margin: 0px;

【解决方案3】：

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

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

【讨论】：

纯代码答案不是很有用...添加 cmets 或解释您所做的工作，以及它为什么有效。

【解决方案4】：

投票最多的答案是解决 OP 发布的此特定问题，其中内容（文本）被包装在 inline-block 元素中。有些情况可能是关于在容器内垂直居中正常元素，这也适用于我的情况，因此您只需要：

align-self: center;

【讨论】：

【解决方案5】：

最好的做法是将一个弹性盒嵌套在弹性盒内。您所要做的就是给孩子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;
}

【讨论】：

如果你想要一个完美的居中文本。 text-align:center 不能单独工作。使用align-items: center。
我猜如果你将align-items: center 提供给拥有display: flex 的父元素，那么它会自动应用于它的所有子元素，因此不必为每个子元素显式声明align-items: center
@ChandraAgarwala - 确实如此，但如果您想让每个孩子的内容垂直居中，您还需要为每个孩子添加另一个 display: flex; align-items: center;。

【解决方案6】：

结果

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

使用align-items 代替align-self，我还将flex-direction 添加到column。

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

【讨论】：

【解决方案7】：

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

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

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

【讨论】：

【解决方案8】：

使用display: flex可以控制HTML元素的垂直对齐方式。

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

【讨论】：

【解决方案9】：

这取决于你的 li 高度，只需再叫一件事行高

* {
  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:50px;line-height:50px;
}

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

【讨论】：

【解决方案10】：

将li中的显示设置为flex，并将align-items设置为center。

li {
  display: flex;

  /* Align items vertically */
  align-items: center;

  /* Align items horizontally */
  justify-content: center;

}

我个人也会针对伪元素并使用border-box (Universal selector * and pseudo elements)

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

【讨论】：

【解决方案11】：

Align-self 不对齐 li 内的项目。相反，它将 li 作为一个整体对齐。

使用align-items 会在 li 中显示文本。查看此代码。有用。

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

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

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

【讨论】：

【解决方案12】：

我不会写答案，因为很多人已经给出了正确的答案。不过，我想向您展示一个有用的工具，它可以帮助您避免将来出现此类问题。

在浏览器的开发工具中，您需要检查一个元素，并在display: flex 开启的情况下，按屏幕截图中显示的图标。

然后您将看到为display: flex 选择一些属性的选项，这样您就可以轻松快速地检查所有选项，而无需知道您可以使用什么

【讨论】：

这个真的很有用，顺便说明一下，好像不是在firefox，而是在chrome。