html - tabla - ¿Cómo alinear verticalmente el texto dentro de un flexbox?
centrar verticalmente bootstrap 4 (6)
Me gustaría usar flex box para alinear verticalmente algún contenido dentro de un <li> pero no tener gran éxito.
Lo he comprobado en línea y muchos de los tutoriales utilizan un div de envoltura que obtiene los elementos de align-items:center en la configuración flexible del padre, pero me pregunto si es posible eliminar este elemento adicional.
Opté por usar flex box en este caso ya que la altura del elemento de la lista será un% dinámico.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height: 20%;
}
<ul>
<li>This is the text</li>
</ul>
El mejor movimiento es simplemente anidar un flexbox dentro de un flexbox . Todo lo que tienes que hacer es dar al niño elementos de align-items: center . Esto alineará verticalmente el texto dentro de su padre.
// Assuming a horizontally centered row of items for the parent but it doesn''t have to be
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
align-items: center;
}
En lugar de utilizar align-self: center use align-items: center .
No es necesario cambiar flex-direction o usar text-align (como se sugiere en otra respuesta ).
Aquí está su código, con un ajuste, para que todo funcione:
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; <---- REMOVE */
align-items: center; /* <---- NEW */
background: silver;
width: 100%;
height: 20%;
}
La propiedad align-self aplica a elementos flexibles . Excepto que li no es un elemento flexible porque su padre, la ul , no tiene display: flex o display: inline-flex aplicado.
Por lo tanto, la ul no es un contenedor flexible, la li no es un elemento flexible, y align-self no tiene ningún efecto.
La propiedad align-items es similar a align-self , excepto que se aplica a contenedores flexibles .
Dado que li es un contenedor flexible, align-items pueden utilizarse para centrar verticalmente los elementos secundarios.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; */
align-items: center;
background: silver;
width: 100%;
height: 20%;
}
<ul>
<li>This is the text</li>
</ul>
Técnicamente, así es como funcionan align-items align-self trabajo de align-self ...
La propiedad align-items (en el contenedor) establece el valor predeterminado de align-self (en los elementos). Por lo tanto, align-items: center significa que todos los elementos flexibles se configurarán en align-self: center .
Pero puede anular este valor predeterminado ajustando la align-self en elementos individuales.
Por ejemplo, es posible que desee columnas de igual altura, por lo que el contenedor está configurado para align-items: stretch . Sin embargo, un elemento debe fijarse en la parte superior, por lo que se establece en align-self: flex-start .
example
¿Cómo es el texto un elemento flexible?
Algunas personas pueden preguntarse cómo una serie de texto ...
<li>This is the text</li>
Es un elemento hijo de la li .
La razón es que el texto que no está explícitamente envuelto por un elemento de nivel en línea está envuelto algorítmicamente por un cuadro en línea. Esto lo convierte en un elemento en línea anónimo e hijo del padre.
De la especificación de CSS:
9.2.2.1 Cajas en línea anónimas
Cualquier texto que esté contenido directamente dentro de un elemento contenedor de bloques debe tratarse como un elemento en línea anónimo.
La especificación de flexbox proporciona un comportamiento similar.
Cada elemento secundario en flujo de un contenedor flexible se convierte en un elemento flexible, y cada serie de texto contiguo que está directamente contenido dentro de un contenedor flexible se envuelve en un elemento flexible anónimo.
Por lo tanto, el texto en el li es un elemento flexible.
Para futuros Googlers,
La respuesta más votada y la segunda también son para resolver este problema específico publicado por OP, donde el contenido (texto) estaba siendo "algorítmicamente aliado" y se envolvía dentro del elemento de bloque en línea. PERO, su caso puede consistir en centrar un elemento normal verticalmente dentro de un contenedor , que también se aplica en mi caso, por lo que todo lo que necesita es
align-self: center;
Solo estoy poniendo esto aquí ya que este es el resultado principal para la consulta mencionada anteriormente y también estuve bastante confundido por bastante tiempo * Derp *
Puede cambiar las pantallas ul y li a table y table-cell . Entonces, vertical-align funcionaría para usted:
ul {
height: 20%;
width: 100%;
display: table;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
background: silver;
width: 100%;
}
Edición: Por favor use la respuesta de Michael_B en lugar de la mía. Eliminaría esta respuesta si pudiera, pero las respuestas aceptadas no se pueden eliminar.
Si hace que la flex-direction vertical (usando la column ), entonces justify-content: center centros verticalmente. Luego, solo puede usar text-align: center to center horizontalmente también.
li {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
Aquí está en acción: http://codepen.io/anon/pen/Fkhgo
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items:center;
background: silver;
width: 100%;
height: 20%;
}
<ul>
<li>This is the text</li>
</ul>