使用无法居中的 Tailwind flex 项目答案

【问题标题】：Using Tailwind flex items not able to center使用无法居中的 Tailwind flex 项目
【发布时间】：2021-07-14 09:53:54
【问题描述】：

我想放置 3 个弹性项目，类似于 instagram 登录页面（第一行 - 图片，登录表单）和（第二行 - 页脚）

我有下面的代码

<div className='container mx-auto px-4 lg:px-0 flex flex-col max-w-screen-md justify-center items-center'>
  <div className='container mx-auto px-4 lg:px-0 flex flex-row justify-center'>
    <div className='lg:w-3/5 items-center'>
      <p> first </p>
    </div>
    <div className='lg:w-2/5 items-center'>
      <p> second </p>
    </div>
  </div>
  <div className='flex'>
    <div className=''>
      <p> third </p>
    </div>
  </div>
</div>

我无法使第一行项目居中，它们向左对齐。

请澄清这个逻辑出了什么问题

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

<div className="container mx-auto px-4 lg:px-0 flex flex-col max-w-screen-md justify-between items-center border-orange-500 border-2">
  <div className="container mx-auto px-4 lg:px-0 flex flex-col items-center">
    <div className="lg:w-3/5 flex justify-center border-2 border-red-500">
      <p> first </p>
    </div>
    <div className="lg:w-2/5 flex flex-row justify-center border-2 border-blue-500">
      <p> second </p>
    </div>
  </div>
  <div className="flex border-2 border-green-500">
    <div className="">
      <p> third </p>
    </div>
  </div>
</div

我在项目周围添加了边框，以便更容易看到，但问题出现在第 2 行，flex-row justify-center 您需要将其更改为 flex-col items-center 或更改为 flex-wrap。

【讨论】：

【解决方案2】：

我意识到已经 5 个月了；然而，

<div className="..." ></div>

应该只是

<div class="..." ></div>

【讨论】：

【解决方案3】：

<link href="https://unpkg.com//tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex flex-col items-center justify-between min-h-screen bg-gray-100">
  <!-- Main Content -->
  <div class="flex flex-col items-center justify-center flex-1 w-full p-4">
    <div class="flex flex-col w-full max-w-xs p-6 space-y-3 bg-white border border-gray-200 rounded-sm">
      <p class="self-center mb-4 text-4xl text-gray-900">Login</p>
      <input class="text-xs text-gray-400 bg-gray-50 py-1.5 rounded px-2 border border-gray-200" type="text" placeholder="Username" />
      <input class="text-xs text-gray-400 bg-gray-50 py-1.5 rounded px-2 border border-gray-200" type="text" placeholder="Password" />
      <button class="py-1 text-sm font-semibold text-white rounded bg-blue-500">Login</button>
    </div>
    <p class="pt-4 text-gray-500">Get the app.</p>
  </div>

  <!-- Footer -->
  <div class="p-4 text-sm text-gray-400">Footer</div>
</div>

https://play.tailwindcss.com/L8rgPEBUPc

【讨论】：