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

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"
         >
    <div >
        <div >
            <h5 >
                Lorem ipsum dolor site <span >15% OFF</span> amet
            </h5>
            <a href="#"
               alt=""
               >
                Discount Code
            </a>
        </div>
    </div>
</section>

CodePudding user response：

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" >
    <div >
      <div >
        <h5 >
          Lorem ipsum dolor site <span >15% OFF</span> amet
        </h5>
        <a href="#" alt="" >
                Discount Code
            </a>
      </div>
    </div>
  </section>
</body>

CodePudding user response：

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" >
  <div >
    <div >
      <h5 >
        Lorem ipsum dolor site <span >15% OFF</span> amet
      </h5>
      <a href="#" alt="" >
          Discount Code
        </a>
    </div>
  </div>
</section>