Início / coding / Perguntas / 77227576
Accepted
Hasan
Asked: 2023-10-04 15:26:50 +0800 CST

Tailwind mx-auto não centraliza o elemento no meio [duplicado]

  • 772

Eu sei que essa pergunta foi feita muitas vezes. Mas todos são códigos complexos e as soluções diferem com base nos seus requisitos específicos.

Execute este código muito simples no Tailwind Playground :

<div class="h-48 w-full bg-red-400">
  <a class="mx-auto inline-flex items-center bg-blue-400 px-8 py-5">Hello</a>
</div>

O anão será colocado no meio. O mx-autonão funciona.

Alguém pode me dizer por que isso acontece? E o que devo fazer para colocá-lo no meio.

PS Não posso usar text-centerno elemento pai.

css

2 respostas

  1. Best Answer

    Não se pode usar margin-left: auto; margin-right: autopara centralizar um elemento embutido. Para centralizá-lo sem usar text-centerno pai, considere aplicar display: flexem vez de display: inline-flexalterar a inline-flexclasse para flexe depois:

    Aplicando justify-content: centervia justify-centerpara que o texto Olá seja centralizado:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="h-48 w-full bg-red-400">
  <a class="mx-auto flex items-center justify-center bg-blue-400 px-8 py-5">Hello</a>
</div>

    Ou width: max-contentvia w-maxpara <a>centralizar o próprio elemento:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="h-48 w-full bg-red-400">
  <a class="mx-auto flex items-center w-max bg-blue-400 px-8 py-5">Hello</a>
</div>

    • 1

  2. A classe mx-auto deve funcionar para centralizar o elemento horizontalmente dentro de seu pai. No entanto, há um problema comum que pode impedir que ele funcione conforme o esperado: o elemento pai deve ter uma largura definida para que o mx-auto centralize seu elemento filho.

    No seu código, o pai tem uma classe h-48 w-full bg-red-400, mas w-full faz com que ele ocupe toda a largura do contêiner pai. Para usar mx-auto efetivamente para centralização, você deve remover w-full ou especificar uma largura fixa para parent . Aqui está uma versão atualizada do seu código com w-full removido:

    <div class="h-48 bg-red-400">
 <a class="mx-auto inline-flex items-center bg-blue-400 px-8 py-5">Hello</a>
</div>

    Agora, o elemento deve estar centralizado horizontalmente dentro do vermelho. Se você ainda encontrar problemas, verifique se há alguma regra ou estilo CSS conflitante que possa estar afetando o layout.

    • 1

relate perguntas