我试图使用顺风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，即网格，然后是一系列“内容”div。第一个内容高2行（2个复选框）。第二个是一行高（一个复选框）。

我的问题是第二个网格框中的复选框与该框的顶部对齐，我希望它垂直居中。我添加了背景色，这样我就可以看到div跨越了上一个网格框的整个高度，但我无法找到在包含div的复选框中居中的方法。

有人能告诉我怎样才能得到我想要的效果吗？更重要的是，有人能向我解释一下盒子模型是如何工作的，并解释为什么它没有做我想要的事情吗？理想情况下，为了保持一致性，我希望能够用顺风来实现这一点，但原始CSS也可以。

顺晟科技：

据我所知，第二个元素位于整个网格元素的顶部，但你希望它位于中心。如果是这个问题，请检查此片段:（我已经将第二个网格列垂直居中）

解释:要将元素放在中心（或改变它们的位置），必须给它一个例如。块、flex、grid等。然后有几种方法可以将元素居中/定位。类相关的相关样式。例如:

• 对于model，您可以使用wailwind中的which作为classname将元素垂直居中。要使其水平居中，可以使用顺风中的classname.
• 对于model，可以使用wailwind中的classname将元素垂直和水平居中。

对于每个显示属性，这些属性略有不同。如果你不知道，你可以在谷歌上查找。希望能有所帮助。

通过将类应用到网格来将项与中心对齐（此方法将对齐所有项，并可能在以后向网格添加更多元素时以不希望的方式影响其他子元素）。

    <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 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>

我不确定它是否准确地回答了您的问题，但是元素保留在左上角的原因是它仍然显示为block。将父元素更改为网格不会更改子元素的显示类型。

块级元素总是从新行开始，浏览器会自动在元素前后添加一些空间（边距）。