html - Texto no centrado con justify-content: centrar

css css3

Question

Tengo un div con display: flex . Su contenido está centrado horizontal y verticalmente.

Cuando el contenido es demasiado largo en el div, el contenido se ajusta. Pero la alineación se rompe en este caso. Ver el fragmento.

Si agrego text-align: center se muestra correctamente. Pero, ¿por qué no se centra sin text-align: center ?

.box{
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
}
.flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.with-align{
text-align: center;
}

<div class="box flex">
some long text here
</div>
<div class="box flex with-align">
some long text here
</div>

Answer 1

La estructura HTML de un contenedor flexible tiene tres niveles:

• El contenedor
• el objeto
• el contenido

Cada nivel representa un elemento separado e independiente.

La propiedad justify-content , que se establece en contenedores flexibles, controla los elementos flexibles. No tiene control directo sobre los elementos secundarios del elemento (el texto, en este caso).

Cuando configura justify-content: center en un contenedor de dirección de fila, el elemento se contrae al ancho del contenido (es decir, reducir para ajustar) y se centra horizontalmente. El contenido, al estar dentro del artículo, acompaña el viaje.

Todo está bien centrado, cuando el contenido es más estrecho que el contenedor flexible .

Por otro lado, cuando el contenido es más ancho que el contenedor flexible , el elemento flexible ya no puede centrarse. De hecho, el artículo no se puede alinear en absoluto ( start , end , center ) porque no hay espacio libre: el artículo está consumiendo todo el ancho del contenedor.

En tales casos, el texto puede ajustarse. Pero justify-content: center no se aplica al texto. Nunca lo hizo. El texto siempre estuvo sujeto a la text-align: start predeterminada text-align: start ( left en LTR / right en RTL).

Por lo tanto, para centrar el texto directamente, agregue text-align: center al elemento flexible (o al contenedor flexible, realmente no importa debido a la inheritance ).

article {
display: flex;
align-items: center;
justify-content: center;
}
.center {
text-align: center;
}
/* demo styles only */
article {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
}

<article>
<p>some long text here</p>
</article>
<article>
<p class="center">some long text here</p>
</article>