CODEWITHSUNDEEP
cssflexboxcss-gridtailwind-csstailwind-3
Shubham Raj
Shubham Raj

Reputation: 23

Vertically center a div in grid using Tailwindcss

I am trying to centre a div present inside a CSS Grid horizontally and vertically. I am using TailwindCSS v3. Using mx-auto, I can align the content horizontally, but align-middle along with flexbox isn't showing any results. I am attaching the code snippet below.

<div className="grid grid-cols-6 mb-2">
  <div className="col-span-1">
    <div className="flex align-middle">
      <ImLocation className="text-lg text-black mx-auto" />
    </div>
  </div>

  <div className="col-span-5">
    <p className="text-sm md:text-base text-black">
      Address Line 1, <br />
      Address Line 2, <br />
      Address Line 3
    </p>
  </div>
</div>

The issue here is that the first inner-div (with class col-span-1) has a smaller height than the other div. I want that div to align in the centre with the other div vertically. ImLocation is a react icon that I have used.

Upvotes: 1

Views: 4113

Answers (1)

VMT
VMT

Reputation: 819

Use items-center and justify-center like below:

<div className="grid grid-cols-6 mb-2">
    <div className="col-span-1">
        <div className="flex flex-row items-center justify-center">
            <ImLocation className="text-lg text-black mx-auto" />
        </div>
    </div>

    <div className="col-span-5">
        <p className="text-sm md:text-base text-black">
            Address Line 1, <br />
            Address Line 2, <br />
            Address Line 3
        </p>
    </div>
</div>

Upvotes: 3

Related Questions