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

Question

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

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

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

* {
  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属性适用于弹性项目.除了你li的不是灵活项目,因为它的父 - 没有ul- display: flex或没有display: inline-flex.

因此,ul它不是flex容器,li不是flex项,align-self也没有效果.

该align-items属性类似于align-self,但它适用于柔性容器.

由于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演示

从技术上讲,这是如何align-items和align-self工作......

该align-items属性(在容器上)设置的默认值align-self(在项目).因此,align-items: center表示将所有弹性项目设置为align-self: center.

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

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

例

文本如何成为弹性项目？

有些人可能想知道如何运行一段文字......

<li>This is the text</li>

是一个孩子的元素li.

原因是未由内联级元素显式包装的文本由内联框在算法上包装.这使它成为父内容的匿名内联元素和子元素.

从CSS规范:

9.2.2.1匿名内联框

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

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

4. Flex项目

Flex容器的每个in-flow子项都变为flex项,并且直接包含在flex容器内的每个连续文本行都包含在匿名flex项中.

因此,该文本li是一个弹性项目.

Answer 2

编辑:请使用Michael_B的答案而不是我的答案.如果可以的话,我会删除这个答案,但是接受的答案不能删除.

如果使flex-direction垂直(使用column)然后justify-content: center垂直居中.然后你也可以使用text-align: center水平居中.

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

在这里它是在行动:http://codepen.io/anon/pen/Fkhgo

Answer 3

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

在浏览器的开发工具中，您需要检查元素并display: flex单击屏幕截图中显示的图标。

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

Answer 4

对于未来的Google员工,

投票最多的答案也是第二个答案,用于解决OP发布的这个特定问题,其中内容(文本)被"算法合法"包含在内联块元素中.但是,你的情况可能是将一个普通元素垂直居中放在容器内部,这也适用于我的情况,所以你需要的只是

align-self: center;

只是把它放在这里,因为这是上述查询的最高结果,而且我很困惑很长一段时间*Derp*

Answer 5

最好的举措是将flexbox嵌套在flexbox中.你所要做的就是给孩子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 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%; 
}

Answer 7

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

li {
  display: flex;

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

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

}

我个人也会针对伪元素并使用border-box （通用选择器 * 和伪元素）

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

Answer 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>

Answer 9

Align-self不对齐 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>

Answer 10

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