How do I vertically center the text within a flex

2019-07-02 15:36发布

站内文章 / HTML/CSS

29 0

女痞

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Is there a special way to vertically center text in an element using flexboxes (or other pure CSS)?

Fiddle: 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%;}

回答1:

Using line-height is one solution, here's the link to Fiddle.

Update: I took a little more interest in the flex model and found the centering properties, so I guess this makes a better solution for you (although not that neat and elegant because of all the prfixes). Here is the link to Fiddle using flex properties for alignment.

And here is a link that explains the usage of the properties.