如何在顺风中以自定义高度居中网格行中的元素？

Question

在顺风中，如何在不使用任何填充或边距的情况下将文本1垂直和水平放置在中心？我想要两行分开的宽度。

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 h-24 "> Text 1 </div>

  <div class="border-2 self-center"> Text 2 </div
</div>

https://play.tailwindcss.com/7Zog1vjVEh

Answer 1

您可以使用align-content类https://tailwindcss.com/docs/align-content：您可以将flex flex-wrap content-around类添加到h-24元素，并将文本放在标记之间以使其垂直居中。

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 h-24 flex flex-wrap content-around"><div>Text 1</div></div>
  <div class="border-2 self-center">Text 2</div
</div>

https://play.tailwindcss.com/JiPa45W4RR

Answer 2

您的代码中缺少一些类。请参阅下面的正确代码

<div class="grid grid-row-2 justify-items-center items-center">
  <div class="border-2 w-24 h-24 justify-center items-center flex">Text 1</div>
  <div class="border-2 self-center">Text 2</div>
</div>

我已经为您创建了一个演示。https://play.tailwindcss.com/CrUCSx4Fbp