Dominando layout: por que botão inline-flex não centraliza e como corrigir sem regressão

Esse bug é clássico em interface real: o botão parece “quase centralizado”, mas o texto fica deslocado quando a largura muda, quando entra ícone ou quando o label quebra em duas linhas. Em quase todos os casos, a raiz está no uso de text-center em um elemento que virou container inline-flex.

Cenário de erro que vi em produção

Componente:

<button class="inline-flex items-center gap-2 w-64 px-8 py-3 bg-brand-primary text-white rounded-full font-medium text-center">
  Clique aqui
</button>

Sintoma:

1. botão com largura fixa (w-64);
2. label visualmente mais próximo da esquerda;
3. em breakpoints menores, desalinhamento aumenta;
4. com ícone, o problema fica mais perceptível.

Causa raiz: text-align não controla distribuição de item flex

Quando o botão vira inline-flex, o navegador trata o conteúdo pelos eixos do Flexbox:

• eixo principal: justify-*;
• eixo cruzado: items-*.

text-center atua sobre alinhamento de texto em caixa de linha, não sobre “distribuição de filhos flex”. Então ele não resolve o deslocamento horizontal do conjunto ícone + label.

Correção base correta

<button class="inline-flex items-center justify-center gap-2 w-64 px-8 py-3 bg-brand-primary text-white rounded-full font-medium">
  <span>Saiba mais</span>
</button>

O ponto obrigatório é justify-center para eixo horizontal.

Ajuste para componentes com ícone SVG

<button class="inline-flex items-center justify-center gap-2 w-64 px-8 py-3">
  <svg class="h-4 w-4 shrink-0" aria-hidden="true" viewBox="0 0 20 20"></svg>
  <span class="leading-none">Continuar</span>
</button>

Boas práticas que evitam drift visual:

• shrink-0 no ícone;
• leading-none no label quando o design pede altura compacta;
• evitar line-height aleatório herdado de container externo.

Quando evitar largura fixa

w-64 força caixa rígida. Se o conteúdo varia por idioma, prefira largura elástica com mínimo/máximo:

<button class="inline-flex items-center justify-center min-w-40 max-w-full px-6 py-3">
  Confirmar operação
</button>

Isso reduz quebra em traduções longas e melhora responsividade.

Debug prático que eu uso no DevTools

1. inspecionar botão;
2. verificar computed display, justify-content, align-items;
3. desabilitar w-* temporariamente para comparar;
4. testar label curto e longo;
5. validar foco/hover sem deslocar layout.

Checklist rápido:

• [ ] display = inline-flex ou flex confirmado
• [ ] justify-center presente
• [ ] items-center presente
• [ ] ícone com shrink-0
• [ ] estado :focus-visible não altera dimensões

Acessibilidade e consistência visual

Além de centralização, eu mantenho:

• contraste de texto adequado;
• área clicável mínima (44px aproximado);
• rótulo descritivo (nada de “Clique aqui” sem contexto em CTA crítico).

Conclusão

Se o componente é flex, o alinhamento tem que ser pensado por eixo, não por text-align. A combinação justify-center + items-center, junto com controle de ícone e largura, elimina o desalinhamento e evita regressão quando a UI escala para múltiplos breakpoints e idiomas.

Este post está licenciado sob CC BY-NC.