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は 1 つの解決策です。Fiddle へのリンクは次のとおりです。

更新:フレックス モデルにもう少し興味を持ち、センタリング プロパティを見つけたので、これがより良い解決策になると思います (ただし、すべての接頭辞があるため、すっきりとエレガントではありません)。これは、配置にフレックスプロパティを使用する Fiddle へのリンクです。

そして、ここにプロパティの使用法を説明するリンクがあります。

于 2013-03-23T22:01:24.603 に答える