Alineación de botones (patrón correcto)
Contexto
En Oxygen 6, los elementos como Button, Icon o similares no se comportan como divs normales a nivel de alineación.
Intentar centrarlos directamente mediante Flex en el contenedor padre no siempre funciona, aunque la configuración parezca correcta.
Este documento describe el patrón que sí funciona siempre.
Problema típico
Estructura inicial:
Section
└── container
├── Text
└── Button
Configuración aplicada:
- container → display: flex
- direction → column
- align-items → center
Resultado:
- El botón no se centra
- Oxygen no muestra errores
- Cambiar clases, limpiar caché o tocar el botón no resuelve nada
Causa
En Oxygen 6:
Conclusión:
No se debe alinear directamente un Button.
Solución correcta (patrón recomendado)
1. Introducir un wrapper intermedio
Nueva estructura:
Section
└── container
├── Text
└── btn-wrap (Div)
└── Button
2. Configuración del wrapper (btn-wrap)
Seleccionar el Div que envuelve el botón y aplicar:
Layout:
- Display: Flex
- Direction: Row
- Align (X): Center
No es necesario tocar:
Resultado
- El botón queda perfectamente centrado
- El texto no se ve afectado
- Funciona en desktop y mobile
- Patrón estable y reutilizable
- Compatible con componentes
Regla de oro
En Oxygen 6, los elementos especiales se alinean siempre a través de un wrapper.
Si algo no se alinea:
- no se fuerza
- no se pelea
- se envuelve
Notas
- Este patrón es válido para:
- Button
- Icon
- elementos interactivos
- Evita hacks como:
- text-align: center global
- márgenes automáticos
- overrides locales frágiles
Estado
- probado en producción
- comportamiento consistente
- recomendado como estándar interno