css - imagen - ¿Cómo centro verticalmente el texto dentro de un elemento flexible?
centrar verticalmente css flex (1)
¿Hay alguna manera especial de centrar verticalmente el texto en un elemento usando flexboxes (u otro CSS puro)?
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%;}
El uso line-height es una solución, aquí está el enlace a Fiddle.
Actualización: Tomé un poco más de interés en el modelo flex y encontré las propiedades de centrado, así que supongo que esto es una mejor solución para usted (aunque no es tan elegante y ordenada debido a todos los prfits). Aquí está el enlace a Fiddle usando propiedades de flexión para la alineación.
Y aquí hay un enlace que explica el uso de las propiedades.