CODEWITHSUNDEEP
htmlcssgridtailwind-css
Nizamudheen At
Nizamudheen At

Reputation: 334

How to center elements in gird row with custom height in tailwind?

In tailwind how to place Text 1 at the center vertically and horizontally without using any padding or margin ? I want to have separate widths for two rows.

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 h-24 "> Text 1 </div>

  <div class="border-2 self-center"> Text 2 </div
</div>

https://play.tailwindcss.com/7Zog1vjVEh

Upvotes: 1

Views: 2681

Answers (2)

Pof
Pof

Reputation: 979

You could use the align-content classes https://tailwindcss.com/docs/align-content : you could add flex flex-wrap content-around classes to your h-24 element, and wrap your text between tags to vertically center it.

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 h-24 flex flex-wrap content-around"><div>Text 1</div></div>
  <div class="border-2 self-center">Text 2</div
</div>

https://play.tailwindcss.com/JiPa45W4RR

Upvotes: 1

Mohd Salman
Mohd Salman

Reputation: 454

You are missing some classes in your code. See correct code below

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 w-24 h-24 justify-center items-center flex">Text 1</div>
  <div class="border-2 self-center">Text 2</div>
</div>

I have created a demo for you. https://play.tailwindcss.com/CrUCSx4Fbp

Upvotes: 3

Related Questions