css - 我在 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在两个对象之间添加了 ，但是在第一个对象之前的空间被吃掉了，所以随着增加，最左边的对象被更多地“推”到左边space-x。

这是居中的：

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

标签： csstailwind-csscentering

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>

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