如何在flexbox中垂直对齐文本？ [英] How to vertically align text inside a flexbox?

问题描述

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

I would like to use flex box to vertically align some content inside an <li> but not having great success.

我已经在线检查过，许多教程实际上使用了一个包装器div，它从父级的flex设置中获取 align-items：center ，但是我想知道是否有可能切出这个额外的元素？

I've checked online and many of the tutorials actually use a wrapper div which gets the align-items:center from the flex settings on the parent, but I'm wondering is it possible to cut out this additional element?

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

I've opted to use flex box in this instance as the list item height will be a dynamic %.

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

推荐答案

编辑：请参阅 Michael_B的回答

如果你使用 flex-direction vertical（使用列），然后 justify-content：center 然后你可以使用 text-align：center 也水平居中。

If you make the flex-direction vertical (using column) then justify-content: center centers vertically. Then you can just use text-align: center to center horizontally as well.

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

这里是操作中： http://codepen.io/anon/pen/Fkhgo

这篇关于如何在flexbox中垂直对齐文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！