【问题标题】：How center items in Tailwind css如何在 Tailwind css 中居中项目
【发布时间】：2022-11-10 03:29:24
【问题描述】：
如何在 Tailwind 中将内容或项目以小尺寸居中。我做了 Tailwind 中可用的所有对齐类它不起作用。这是顺风V3
<div class="bg-white pb-8">
<div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
<div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/dBKsusYFvi?size=540x720
【问题讨论】：
标签：
tailwind-css
tailwind-3
【解决方案1】：
如果您打算使用 Tailwind 的 flex，只需将您的项目包装在一个包含 flex 和 justify-center 的容器中即可。请记住，这些课程需要在直接父元素您想要居中的项目。
<div class="flex justify-center">
<div>centered item</div>
</div>
下面的示例会将样式应用于在 Tailwind 主题中分配给 sm 或默认为 480px 的任何尺寸或以上的屏幕 - 相当于 @media (min-width: 480px)。
<div class="sm:flex sm:justify-center">
<div>centered item</div>
</div>
这是一个可以运行的 sn-p 来说明：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex bg-slate-100 p-8 justify-center">
<div class='text-2xl'>centered item</div>
</div>
</body>
</html>
我也一定会check out the docs，它们对大量示例很有帮助。
我发现我必须使用 grid justify-items 来解决这个问题
<div class="bg-white pb-8">
<div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
<div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
<div class="grid justify-items-center text-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
<div class="text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="grid justify-items-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="grid justify-items-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
</div>
</div>
</div>