Tailwind CSS - 无法在 div 中居中搜索栏答案

【问题标题】：Tailwind CSS - Can't center search bar inside a divTailwind CSS - 无法在 div 中居中搜索栏
【发布时间】：2021-10-20 06:55:07
【问题描述】：

我想在父 div 中居中搜索栏，但它不起作用。我尝试在父 div 上使用 flex 和 justify-center，但它不仅不居中，而且还缩小了我的搜索栏的 div。我认为这是因为不允许将类 flex 相互嵌套，所以我尝试了 text-center 但这也没有用。

我查看的一些链接：

代码：

<div>
   <div className="flex items-center max-w-md shadow rounded border-0 p-3">
       <input type="search" className="flex-grow py-2" placeholder="Search by name..." />
       <i className="fas fa-search flex-grow-0 py-2 px-2" />
   </div>
</div>

【问题讨论】：

你使用过内容中心吗？
是的，我已经把它放在顶部的 div 里面了，但是没有用
您当前的代码没有任何添加到“重要的父级”中。外部 <div> 。您的搜索栏覆盖了其直接父级的整个宽度。题。你想水平居中，对吗？
是的，我希望我的搜索栏在它的父 div 内水平居中，并且我的搜索栏没有占据它的父潜水的全部宽度，因为我在上面使用了 max-w-md 跨度>

标签： html css reactjs search tailwind-css

【解决方案1】：

max-w-md 类限制了它所应用的 div 的宽度，但它并不使 div 本身居中。为此，请添加 mx-auto 类：

<div className="flex items-center max-w-md mx-auto shadow rounded border-0 p-3">

https://play.tailwindcss.com/H3C7MWgUeC

【讨论】：