我在 Tailwind CSS 居中做错了什么？

Question

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

我正在努力解决 Tailwind CSS 中的水平项目居中问题。 让我们像这样有两个孩子的 div：

<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 被添加在两个对象之间，但在第一个对象之前的空间被吃掉了，所以最左边的对象被“推”到更左边@987654329 @ 增加。

这是居中的：

<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

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

您可以根据需要删除该类以使两个<p> 标记居中。或者，您可以使用 w-60 类添加另一个 <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 类是多余的，因为它是默认行为，因此我已将其从代码中删除。

Answer 2

你预料到了吗？

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

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