时间戳

首页 > 解决方案 > Tailwind CSS - 无法在 div 内居中搜索栏

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

问题描述

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

我查看的一些链接：

  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>

标签： htmlcssreactjssearchtailwind-css

解决方案

该类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.tai​​lwindcss.com/H3C7MWgUeC

推荐阅读