如何在Flexbox中垂直对齐文本？

Question

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

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

我选择在此实例中使用弹性框，因为列表项高度将是动态％。

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

编辑：请使用Michael_B's answer代替我的。

如果可以，我会删除此答案，但无法删除已接受的答案。

---

如果您使flex-direction垂直（使用column），则justify-content: center垂直居中。然后你也可以使用text-align: center水平居中。

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

这是working demo in codepen。

Answer 2

不使用 align-self: center ，而是使用 align-items: center 。

无需更改flex-direction或使用text-align（如another answer中所述）。

以下是您的代码，只需一次调整即可完成所有工作：

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，但它适用于 Flex容器。

由于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容器的每个in-flow子项都变为flex项，每个都是   连续运行的文本直接包含在flex中   容器包装在一个匿名的flex项目中。

因此，li中的文字是弹性项目。

Answer 3

对于未来的Google员工，

投票最多，回答第二多的答案也用于解决OP发布的这个特定问题，其中内容（文本）被“算法联盟”包裹在内联块元素内。但是，您的案例可能是关于将常规元素垂直放置在容器内的中心，这也适用于我的案例，因此，您所需要做的就是

align-self: center;

只需将其放在此处，因为这是上述查询的最佳结果，并且我在相当长的一段时间内一直感到困惑* Derp *

Answer 4

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

Answer 5

在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;
}
  

Answer 6

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

Answer 7

这取决于你的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>

Answer 8

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

Answer 9

结果

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%; 
}

Answer 10

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

Answer 11

您可以将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