主页 / coding / 问题 / 77227576
Accepted
Hasan
Asked: 2023-10-04 15:26:50 +0800 CST

Tailwind mx-auto 不会将元素居中[重复]

  • 772

我知道这个问题已经被问过很多次了。但它们都是复杂的代码，并且解决方案根据其具体要求而有所不同。

请在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>

不会a放在中间。不起作用mx-auto。

有人可以告诉我为什么会这样吗？我该怎么做才能把它放在中间。

PS 我不能text-center在父元素上使用。

css

2 个回答

  1. Best Answer

    不能用于margin-left: auto; margin-right: auto使内联元素居中。要使其居中而不text-center在父级上使用，请考虑应用display: flex而不是通过将类display: inline-flex更改为 然后执行以下任一操作：inline-flexflex

    应用justify-content: centerviajustify-center使Hello文本居中：

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

    或者width: max-content通过w-max让<a>元素本身居中：

    <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. mx-auto 类应该使元素在其父级中水平居中。但是，有一个常见问题可能会阻止它按预期工作：父元素必须具有定义的宽度，mx-auto 才能使其子元素居中。

    在您的代码中，父容器具有 h-48 w-full bg-red-400 类，但 w-full 使其占据其父容器的整个宽度。要有效地使用 mx-auto 进行居中，您应该删除 w-full 或为父级指定固定宽度。这是删除了 w-full 的代码的更新版本：

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

    现在，该元素应该在红色内水平居中。如果您仍然遇到问题，请检查是否存在任何可能影响布局的冲突 CSS 规则或样式。

    • 1

相关问题