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>