【问题标题】：Different Alignments in Tailwind CSSTailwind CSS 中的不同对齐方式
【发布时间】：2021-06-12 03:27:32
【问题描述】：

我有三个 div：一个导航栏、一个 webgl 播放器和一个面板。我希望导航栏位于顶部，其下方的面板与屏幕右侧对齐，并且 webgl 播放器在剩余空间中垂直和水平居中。

items-center 成功地将事物垂直居中。

为了正确的水平定位，到目前为止，我已经尝试过justify-between，它成功地将面板放在右边缘，但也将 webgl 播放器放在屏幕的左边缘，这是不可取的。

justify-center 将它们都放在中间，我预计右侧元素上的 place-self-end 可以正确放置它，但它根本没有移动。

最小代码示例：

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col justify-center"></div>
  <div class="flex flex-row justify-center items-center">
    <div class="bg-blue-500 w-80 h-60 center"></div>
    <div class="bg-red-500 w-80 h-screen "></div>
  </div>
</div>

也可以在这里找到：https://play.tailwindcss.com/y3uXkVYcWs

期望的结果：其中绿色是导航栏，蓝色是第一个 div，红色是第二个 div。

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

写了这么多，终于找到了这个答案：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

这表示删除任何 justify 和 items-center 并在蓝色元素上使用 margin: auto

HTML

<div class="flex flex-col">
  <div class="bg-green-500 py-12 flex flex-col"></div>
  <div class="flex flex-row justify-center">
    <div class="bg-blue-500 w-80 h-60 center" id="webglPlayer"></div>
    <div class="bg-red-500 w-80 h-screen" ></div>
  </div>
</div>

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

#webglPlayer {
    margin: auto;
}

【讨论】：