垂直居中flexbox项目中的文本 [英] Vertically centring text inside flexbox item

问题描述

justify-content：center

我想要flex项目采取全高度， / code>不工作，并且项目本身的 align-self：center 缩小它的高度，以它自己的内容，而我想要所有项目

在此示例中，我要将数字垂直居中： http://codepen.io/ilyador/pen/ogYbWO?editors=110

解决方案

我可以用下面的方法完成你的数字的垂直居中：

  .flex- item {
 display：flex; 
 flex-direction：column; 
 justify-content：space-around; 
} 
  

如果要使某个对象垂直居中，请将容器设置为 display：flex ，然后使用 justify-content 来完成它。使用 justify-content 可以将其设置为空格或 code>。或者将完成你的目标。

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

I want the flex items to take full height, but the content inside them to be vertically centred.

justify-content: centre doesn't work, and align-self: centre on the item itself shrinks it's height to it's own content, while I want all items to be the same height.

In this example I want the numbers to be vertically centred: http://codepen.io/ilyador/pen/ogYbWO?editors=110

解决方案

I was able to accomplish vertical centering of your numbers with this:

.flex-item {
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

If you want something to be vertically centered, set the container to display:flex and then use justify-content to accomplish it. With justify-content you could either set it to space-around or to center. Either will accomplish your goal.

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

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