如何在 div 的 Tailwind 中居中按钮答案

【问题标题】：How to Center Button In Tailwind in a div如何在 div 的 Tailwind 中居中按钮
【发布时间】：2023-01-27 00:26:30
【问题描述】：

如何在 div 中将顺风按钮居中？

我努力了：

对齐中心
项目中心
MX-自动

内容中心

在所有情况下，按钮都卡在左侧。

h2和p居中没问题。

    <div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
  <h2 class="text-5xl text-white text-center">Contact Us</h2>

  <br />
  <p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
  <button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>

【问题讨论】：

标签： tailwind-css

【解决方案1】：

我建议在容器上使用 flex flex-col items-center 来使孩子在 y 轴上居中。

<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center">
  <h2 class="text-5xl mb-3 text-black">Contact Us</h2>
  <p class="text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
  <button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>

这是result on Tailwind Play

【讨论】：

感谢提示，我也设法解决了 - 将在上面发布解决方案
解决方案不起作用 - 现在多次遇到同样的问题 - 在下面发布了正确的解决方案。

【解决方案2】：

我在我的解决方案中使用了 css 网格。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-10 px-10 mx-0 min-w-full grid place-items-center" className="contactdiv">
    <h2 class="text-5xl text-black text-center">Contact Us</h2>
  
    <br />
    <p class="text-center text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
    <button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

更正 - 多次遇到此问题 - 没有发布的解决方案有效。

向父组件添加 flex、flex-col 和 items-center 没有任何作用。

唯一可行的是将按钮包装在

标签，然后按钮居中。

【讨论】：