我正在尝试使用Tailwind CSS在CSS中布置一个复选框网格。基本结构如下：
<div class="grid sm:grid-cols-3 gap-4">
<div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<div>
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
...
</div>
所以我有一个外部div，它是网格，然后是一系列"；内容"；divs。第一个内容高2行(2个复选框(。第二个是一行高(一个复选框(。
我的问题是，第二个网格框中的复选框与框的顶部对齐，我希望它垂直居中。我添加了背景色，这样我就可以看到div跨越了上一个网格框的整个高度，但我找不到将复选框集中在包含div中的方法。
有人能告诉我如何达到我想要的效果吗？更重要的是，有人能向我解释盒子模型是如何工作的吗？解释为什么它没有做我想做的事？理想情况下，为了一致性，我希望能够使用Tailwind来实现这一点，但原始CSS也可以。
通过将类items-center应用于网格来将项目与中心对齐(此方法将对齐所有项目，并可能在以后向网格添加更多元素时以不希望的方式影响其他子元素(。
<div class="grid gap-4 sm:grid-cols-3 items-center">
您也可以将grid或flex应用于父容器，您希望将其垂直居中(使用items-center(：
<div class="flex items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
<-- or -->
<div class="grid items-center">
<label for="-exact">
<input type="checkbox" id="-exact" value="-exact"> -exact
</label>
</div>
我不确定它是否准确地回答了你的问题，但元素粘在左上角的原因是它仍然显示为一个块。将父元素更改为栅格不会更改子元素的显示类型。
块级元素总是从新行开始，浏览器会自动在元素前后添加一些空格(空白(。
据我所知，第二个div元素位于整个网格元素的顶部，但您希望它位于中心。如果这是问题所在，请查看此片段：(我已将第二个网格列垂直居中(
<!doctype html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!--Main grid element with 2 child divs-->
<div class="grid grid-flow-col gap-4">
<!--First child div with 2 sub child div displayed as columns-->
<div class="flex flex-col">
<div class="p-5 bg-yellow-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
<div class="p-5 bg-red-300">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
<!--Second child with 1 div element, centered in its place-->
<div class="p-5 bg-green-300 h-full flex items-center">
<label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
</div>
</div>
</body>
</html>
解释：要将元素放置在中心(或更改它们的位置(，必须给它一个display name，例如block、flex、grid等。然后有几种方法你可以去中心/定位你的元素。最有效的方法是使用与display name相关的相关样式。例如：
- 对于
Flex模型，您可以使用justify-content: center(在Tailwind中为justify-center类名(来垂直居中元素。为了使其水平居中，您可以使用align-items: center，在Tailwind中它将是items-center类名 - 对于
Grid模型，您将使用place-items: center(在Tailwind中为place-items-center类名(来垂直居中元素&水平
这些对于每个显示属性都有点不同。如果你不知道的话，你可以在谷歌上查一下。希望能有所帮助。