与tailwindcss垂直对齐文本[重复]

Posted 2023-03-04

【中文标题】与tailwindcss垂直对齐文本[重复]

【英文标题】：Vertically align text with tailwindcss [duplicate]

【发布时间】：2021-01-01 01:50:36

【问题描述】：

我们在一个带有 taillwindcss 的 div 元素中有一个 span 文本，将文本与 div 垂直对齐的最佳方法是什么？

<div class="h-64 w-64 flex flex-col align-items justify-center">
   <span>Home</span>
</div>

【问题讨论】：

您不能更改跨度 html？这是文档：tailwindcss.com/docs/vertical-align

你只需要改变垂直对齐的类。请删除align-items 并改用items-center。对于课程的快速参考，您可以随时使用 tailwind 备忘单。 tailwindcomponents.com/cheatsheet

【参考方案1】：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="h-64 w-64 flex flex-col justify-center items-center">
  <span>Home</span>
</div>

【讨论】：

align-items 不属于 tailwindcss -> 可以删除。谢谢。