CODEWITHSUNDEEP
htmlcssflexboxtailwind-css
glitchbox
glitchbox

Reputation: 133

Tailwind CSS center vertically and horizontally inside flex flex-col?

I've got the following code and have tried adding "justify-content", "align-middle", and others but still can't seem to get it to align the h5 and link in the middle of the containing div. Should I be structuring this another way, without using "flex" or "flex-col"?

<section id="cta-image-box"
         class="container mx-auto py-24 mt-32 mb-32">
    <div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
        <div class="flex flex-col items-center">
            <h5 class="text-5xl font-bold text-white mb-10">
                Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
            </h5>
            <a href="#"
               alt=""
               class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
                Discount Code
            </a>
        </div>
    </div>
</section>

Upvotes: 0

Views: 1693

Answers (2)

george
george

Reputation: 586

Take a look to that answer which is already explained how to align vertically center quite clear.

Below, you can see how to apply it to your code. You should give these classes: flex justify-center items-center.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
  <div class="flex justify-center items-center h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
    <div class="flex flex-col items-center">
      <h5 class="text-5xl font-bold text-white mb-10">
        Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
      </h5>
      <a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
          Discount Code
        </a>
    </div>
  </div>
</section>

Upvotes: 1

SinisaM
SinisaM

Reputation: 303

You can achieve this using h-full and place-content-center place-items-center on wrapper div.

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

</head>

<body>
  <section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
    <div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
      <div class="h-full flex flex-col place-content-center text-center place-items-center">
        <h5 class="text-5xl font-bold text-white mb-10">
          Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
        </h5>
        <a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
                Discount Code
            </a>
      </div>
    </div>
  </section>
</body>

Upvotes: 1

Related Questions