尾风CSS在flex flex-col？内垂直和水平居中

tuwxkamq 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(193)

我有下面的代码，并尝试添加“justify-content”，“align-middle”，和其他，但似乎仍然不能让它对齐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>

css

来源：https://stackoverflow.com/questions/75051588/tailwind-css-center-vertically-and-horizontally-inside-flex-flex-col

2条答案

按热度按时间

8oomwypt1#

您可以在 Package 器div上使用h-full和place-content-center place-items-center来实现这一点。

<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>

赞(0）回复(0）举报 2023-01-10

k4emjkb12#

看一下that answer，它已经非常清楚地解释了如何垂直居中对齐。
下面，你可以看到如何将它应用到你的代码中。你应该给予这些类：一个月一个月一个月一个月一个月一个月一个月一个月二个月一个月。

<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>

赞(0）回复(0）举报 2023-01-10

我来回答

尾风CSS在flex flex-col？内垂直和水平居中

2条答案

相关问题

热门标签

最新问答