Tailwind CSS - 无法在 div 内将搜索栏居中

Question

我想将搜索栏置于父项 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>

Answer 1

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

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

https://play.tailwindcss.com/H3C7MWgUeC

Tailwind CSS - 无法在 div 内将搜索栏居中

Tailwind CSS - Can't center search bar inside a div

html

css

search

reactjs

tailwind-css