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).

Considerações práticas#

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.

Veja também

Desenvolvimento De rive e lottie a vídeos com IA: como escolhi a melhor stack de animação web sem pesar a CPU

Desenvolvimento Mistério das cores inconsistentes: por que o mesmo HEX muda entre chrome e firefox

Desenvolvimento O segredo esquecido do HTML: dominando a tag <output> para acessibilidade

Este post está licenciado sob CC BY-NC.