顺风 CSS - 无法在 div 内居中搜索栏

Question

我想把搜索栏放在父div的中间，但是不行。我尝试在父div上使用flex和justify-center，但它不仅不居中，它还缩小了我的搜索栏的div。我认为这是因为它不允许类flex嵌套在彼此之间，所以我尝试了文本中心，但也没有工作。

我查看了一些链接:

1. https://tailwindcss.com/docs/justify-content
2. https://tailwindcss.com/docs/text-align

代码:

<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类限制了它所应用的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