3

有没有一种特殊的方法可以使用弹性框（或其他纯 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%;}
4

1 回答 1

6

使用line-height是一种解决方案，这是Fiddle的链接。

更新：我对 flex 模型产生了更多的兴趣并发现了居中属性，所以我想这对你来说是一个更好的解决方案（尽管由于所有的前缀而不是那么整洁和优雅）。这是使用 flex 属性进行对齐的 Fiddle的链接。

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

于 2013-03-23T22:01:24.603 回答