居中对齐一个元素并右对齐第二个元素- Tailwind CSS

【问题标题】：Center-align one element and right align second element- Tailwind CSS居中对齐一个元素并右对齐第二个元素- Tailwind CSS
【发布时间】：2022-01-24 02:20:48
【问题描述】：

我附上了我要实现的粗略概念，虚线代表容器的中心。我试图居中对齐一个 div 元素，然后在同一行中右对齐第二个 div，而两个元素都水平居中。

【问题讨论】：

你能包括你到目前为止尝试过的东西吗？

标签： html css tailwind-css

【解决方案1】：

试试这样：

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center justify-center border border-dashed">
  <div class="flex-1"></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="flex-1">
    <div class="w-20 h-20 bg-green-500 ml-auto"></div>
  </div>
</div>

【讨论】：

这正是我所需要的。谢谢！