是否有一种特殊的方法可以使用 Flexbox（或其他纯 CSS）在元素中垂直居中文本？
Fiddle: http://jsfiddle.net/WK_of_Angmar/JZZWg/ 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%;}
Using line-height是一种解决方案，这是link http://jsfiddle.net/JZZWg/7/到小提琴。
Update:我对 Flex 模型更感兴趣，并发现了居中属性，所以我想这为您提供了更好的解决方案（尽管由于所有前缀而没有那么整洁和优雅）。这里是link http://jsfiddle.net/JZZWg/27/到 Fiddle 使用 flex 属性进行对齐。
这是一个link http://www.html5rocks.com/en/tutorials/flexbox/quick/这解释了属性的用法。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
