如何在flex元素中垂直居中文本？

问题描述：

是否有一种特殊的方式来使用柔性盒（或其他纯CSS）在一个元素中垂直居中文本？如何在flex元素中垂直居中文本？

小提琴：这里http://jsfiddle.net/WK_of_Angmar/JZZWg/

<body> 
<div id="main"> 
    <section id="a">Test1</section> 
    <section id="b">Test2</section> 
</div>

#a { 
    flex: 1 0 auto; 
} 
#b { 
    flex: 0 0 auto; 
    min-height: 3em; 
    background-color: yellow; 
} 
#a { 
    background-color: blue; 
} 
#main { 
    display: flex; 
    flex-direction: column; 
    height: inherit; 
} 

body {height: inherit;} 
html {height: 100%;}

意外地问这里，而不是堆栈溢出。将不胜感激。 :-) – 2013-03-23 21:42:26

使用flexbox，您可以在flex容器内垂直居中放置一个flex元素，但flexbox不支持在flex元素中居中放置文本内容。您需要使用与在非flex元素中对文本进行居中的相同技巧。 – 2013-03-24 02:46:43

答

使用line-height是一个解决方案，就是在link捣鼓。

更新：我参加了柔性模型多了几分兴趣，发现定心性能，所以我想这让你更好的解决方案（虽然不是很整洁，优雅，因为所有的prfixes的）。这里是link小提琴使用flex属性进行对齐。

这里是一个link，它解释了属性的用法。

啊，不敢相信我忘了这件事。如果没有人提供更优雅的解决方案，我会接受。 – 2013-03-23 22:13:48

尽管还有其他选择（使用垂直对齐和图像），但行高可能更优雅。下面是一篇描述两种解决方案的文章的链接：http://hu.je/example – 2013-03-23 22:21:33

对于永远不会环绕到第二行并位于具有固定高度的容器内的单行文本，这是可能是最优雅的解决方案。它是否符合您的要求？（如果没有，你需要一个不同的解决方案） – 2013-03-24 02:41:05

如何在flex元素中垂直居中文本？

相关推荐