英文:
Tailwind CSS center vertically and horizontally inside flex flex-col?
问题
我已经有以下代码并尝试添加"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>
英文:
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>
答案1
得分: 1
你可以在包裹的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>
英文:
You can achieve this using h-full and place-content-center place-items-center on wrapper div.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 1
看一下这个答案，它已经解释了如何垂直居中对齐，非常清楚。
下面，你可以看到如何将它应用到你的代码中。你应该给这些类：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>
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论