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

1
votes

I want to center the search bar inside the parent div but it's not working. I tried using flex and justify-center on the parent div but not only it doesn't center, it also shrinks my search bar's div. I think it's because it is not allowed to have the classes flex nested inside each other, so I tried text-center but that also didn't work.

Some links I looked into:

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

Code:

<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>
1
htmlcssreactjssearchtailwind-css
have you used content-center? – samin
yes, i've put it inside the top div and it didn't work – S.M
your current code doesn't have anything added to the ' parent that matters ' . The outer <div> . Your searchbar covers the whole width of it's direct parent. Question. Do you want to be centered horrizontally , right ? – Mihai T
yes i want my search bar to be center horizontally inside it's parent div, and my search bar doesn't take the full width of it's parent dive because i used max-w-md on it – S.M

1 Answers

1
votes

The max-w-md class limits the width of the div to which it's applied, but it doesn't centre the div itself. To do that, add the mx-auto class:

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

https://play.tailwindcss.com/H3C7MWgUeC