Ayudas de alineación

Ayudas de texto de POM:

• alignleft / align-left
• aligncenter / align-center
• alignright / align-right
• text-md-down-center (centra el texto y sus descendientes en anchos de hasta 991px)
• web-center-mobile (alias heredado de text-md-down-center para contenido existente)

Las ayudas de texto retenidas específicas de punto de ruptura son text-sm-left y text-sm-right; ambas se aplican a partir de 576px. La dirección explícita md-down se usa cuando la alineación debe aplicarse únicamente a teléfonos y tabletas, dejando sin cambios la alineación de escritorio.

Para diseños flexibles, usa las utilidades de estilo Bootstrap incluidas:

<div class="d-flex justify-content-between align-items-center">…</div>

La dirección flex está disponible solo a través de las ayudas mobile-first flex-row y flex-column. El ajuste de línea está disponible como flex-wrap y flex-nowrap, con las variantes flex-sm-*, flex-md-* y flex-lg-*. Otras variantes de utilidades flex de dirección, tamaño y extra-grandes no forman parte del tema.

Entre los grupos habituales se incluyen:

• justify-content-start|end|center|between|around.

POM limita la alineación del eje principal a esas cinco ayudas no responsivas justify-content-*. Limita la alineación del eje transversal a las clases mobile-first align-items-start, align-items-end y align-items-center usadas por los diseños del tema. Otras variantes de alineación del eje transversal y responsivas no forman parte del tema. El comportamiento predeterminado de estiramiento de Flexbox sigue disponible sin necesidad de una clase.

Las utilidades de alineación afectan a ejes diferentes. En un contenedor flex normal en dirección de fila, justify-content-* controla el eje principal horizontal y align-items-* controla el eje transversal vertical. Si el contenedor cambia a flex-column, esas direcciones prácticas también cambian.

Prueba los controles centrados o alineados a la derecha con etiquetas largas traducidas. No uses espacios en blanco, columnas vacías ni espacios de no separación para simular la alineación.

La alineación del texto no cambia el orden del DOM. Usa la alineación CSS para la presentación y mantén significativo el orden del código fuente/teclado.