CODEWITHSUNDEEP
tailwind-css
Andy
Andy

Reputation: 2140

TailwindCSS - How to centre caption underneath image

I'm trying to use Tailwind to get an image and its caption to be centered.

The caption sometimes could be longer than the image. I want them to be centered along whichever of the two is longer.

The tailwind documentation says to use justify-center to justify items along the center of the container’s main axis.

It gives this example:

<div class="flex justify-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

However when I try to do something similar the items are not centered:

<div class="grid grid-cols-1 justify-center">
    <div><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="text-xs text-gray-800">Long Caption</div>
    <div class="text-xs text-gray-800">Short</div>
</div>

https://play.tailwindcss.com/EcjTbco47I

What am I doing wrong and how do I get these items centered in the containing block?

Upvotes: 2

Views: 2123

Answers (2)

doğukan
doğukan

Reputation: 27399

justify-items-center will do the job.

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-1 justify-items-center">
    <div><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="text-xs text-gray-800">Long Caption</div>
    <div class="text-xs text-gray-800">Short</div>
</div>

Upvotes: 2

Shri Hari L
Shri Hari L

Reputation: 4894

Since the grid is grid-cols-1, it will be having only one column.

So all the three divs occupies full width. So center each of the div.

<div class="grid grid-cols-1 justify-center">
    <div class="flex justify-center"><img src="http://placeimg.com/128/128" class="h-12" /></div>
    <div class="flex justify-center text-xs text-gray-800">Long Caption</div>
    <div class="flex justify-center text-xs text-gray-800">Short</div>
</div>

Upvotes: 1

Related Questions