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

Question

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

Wk_*_*mar 3 css html5 vertical-alignment text-alignment flexbox

是否有一种特殊的方法可以使用flexboxes(或其他纯CSS)在元素中垂直居中文本？

小提琴:http://jsfiddle.net/WK_of_Angmar/JZZWg/

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mil*_*vić 6

使用line-height是一个解决方案,这里是Fiddle 的链接.

更新:我对flex模型有了更多的兴趣,并找到了居中的属性,所以我想这会为你提供更好的解决方案(尽管不是因为所有的prfix而整洁而优雅).以下是使用flex属性进行对齐的Fiddle 链接.

这是一个解释属性用法的链接.

归档时间：	13 年，2 月前
查看次数：	2468 次
最近记录：	13 年，2 月前