Центр CSS Tailwind по вертикали и горизонтали внутри flex flex-col?

У меня есть следующий код, и я попытался добавить «выравнивание содержимого», «выравнивание посередине» и другие, но все еще не могу заставить его выровнять h5 и ссылку в середине содержащего div. Должен ли я структурировать это по-другому, без использования «flex» или «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>

🤔 А знаете ли вы, что...
HTML поддерживает механизмы для встраивания JavaScript-кода для создания интерактивных элементов.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос Flexbox3997 вопросов Tailwind css724 вопроса

Ответы:

Решено

Вы можете добиться этого, используя h-full и place-content-center place-items-center на обертке 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>

Взгляните на этот ответ, в котором уже объяснено, как выровнять вертикально по центру довольно четко.

Ниже вы можете увидеть, как применить его к вашему коду. Вы должны дать эти классы: flexjustify-centeritems-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>

Центр CSS Tailwind по вертикали и горизонтали внутри flex flex-col?

Ответы:

Интересные вопросы для изучения