Html 根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

发布于09月30日

<div class="flex justify-between">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item that is very long</div>
</div>
<div class="text-center">A centered item</div>

This is the result:

如您所见，居中的项目没有与顶行的中间项目对齐.

我希望第一行的中心项目放置在屏幕的中心.我不知道怎么做.我试着证明自己是合理的，但并不奏效.

我该怎么办？

推荐答案

这并不是因为你用justify-evenly或justifiy-between来分隔你的3个项目，这些项目就等于widths.它们必须具有相同的宽度，这样它们才能均匀地放在您的行上，因此您的second item‘S width将居中.

在此之后，你必须将你的second item英尺S text position以text-align为中心.

结果如下:

<div class="flex justify-between">
  <div class="basis-1/3">First item</div>
  <div class="basis-1/3 text-center">Second item</div>
  <div class="basis-1/3 text-right">Third item that is very long</div>
</div>
<div class="text-center">A centered Item</div>

如果你愿意，你可以在你的third item上删除text-right个职业.