Tailwind CSS 居中我做错了什么？

Question

编辑：错误的行为是由于错过了</div>（见截图）。非常感谢您的耐心等待-_-

我正在为 Tailwind 中的水平项目居中而苦苦挣扎 CSS。让我们用一个 div 和两个 children 像这样：

<div class="flex flex-row w-60 justify-center items-center space-x-10 border-2">
  <p>text 1</p>
  <p>text 2</p>
</div>

奇怪的是，它没有居中！

我发现的问题是 x-spacing 添加在两个 object 之间，但在第一个 object 之前的 space 处被蚕食, 因此随着 space-x 的增加，最左边的 object 被“推”得更多。

这是居中的：

<div class="flex flex-row w-60 justify-center items-center space-x-0 border-2">
  <p>text 1</p>
  <p>text 2</p>
</div>

结果：

这不是：

<div class="flex flex-row w-60 justify-center items-center space-x-16 border-2">
  <p>text 1</p>
  <p>text 2</p>
</div>

结果：

有人知道解决这个问题的方法吗？这是一个错误还是我只是期待 justify-items 的错误行为？

Answer 1

你预料到了吗？

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-between">
  <div class="flex px-2 ">text 1</div>
  <div class="flex px-2 ">text 2</div>
  <div class="flex px-2 ">text 3</div>
</div>

如果不是，请更详细地描述您期望的结果！

Answer 2

问题在于使用 w-60 将 <div> 设置为 15rem 宽。这会导致您的两个 <p> 标签在允许的 15rem 内居中，但由于 <div> 是左对齐的，所以项目没有正确居中。

您可以根据需要删除 class 以使两个 <p> 标记居中。或者，您可以添加另一个带有 w-60 class 的 <div> 标签以获得您想要的居中效果。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet"/>


<div class="w-60 bg-red-50">This div is 15rem wide</div>

<hr class="my-5">

<!-- 15rem container div -->
<div class="flex w-60 bg-red-50 justify-center items-center space-x-16 border-2">
    <p>text 1</p>
    <p>text 2</p>
</div>


<hr class="my-5">

<!-- Additional div wrapper with the w-60 class applied. -->
<div class="w-60 mx-auto">
    <div class="flex bg-red-50 justify-center items-center space-x-16 border-2">
        <p>text 1</p>
        <p>text 2</p>
    </div>
</div>
<hr class="my-5">


<!-- 100% wide container div -->
<div class="flex bg-red-50 justify-center items-center space-x-16 border-2">
    <p>text 1</p>
    <p>text 2</p>
</div>

flex-row class 是多余的，因为它是默认行为，所以我已将其从代码中删除。

Tailwind CSS 居中我做错了什么？

What am I doing wrong with Tailwind CSS centering?

css

tailwind-css

centering