Question

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

小提琴：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%;}

Answer 1

使用line-height是一种解决方案，这里是小提琴的 link 。

更新：我对flex模型更感兴趣并找到了居中的属性，所以我想这会为你提供更好的解决方案（尽管不是因为所有的prfixes都很整洁和优雅）。以下是使用flex属性进行对齐的Fiddle的 link 。

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

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

1 个答案: