CODEWITHSUNDEEP
htmlcssresponsive-designtailwind-css
Farhan Bin Amin
Farhan Bin Amin

Reputation: 60

Center text vertically in grid with tailwindcss

I was trying to create a responsive grid layout with tailwindcss but I could not center the texts vertically in grid. All I could do was center the text horizontally with text-center.

<body>
  <div class="grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center ">
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    ...
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
</body>

Demo in codepen

Upvotes: 1

Views: 7887

Answers (2)

Damon J Medek
Damon J Medek

Reputation: 11

You can use justify-self-center to horizontally center text inside grid column. and self-center to vertically center text/content inside grid column. For added clarity, content-center to vertically center grid Column, aka like a child div inside parent grid container. justify-center for horizontal. The question you have to ask is, do I want to effect the grid column position? or the grid column contents position?

Upvotes: 1

Danila
Danila

Reputation: 18476

You can do it with flex. Just add this flex justify-center items-center to every text div, like that:

<div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>

It will make it flex container with children centered both horizontally and vertically.

And you can also remove text-center from wrapper since it will be redundant.

Upvotes: 4

Related Questions