Vertically centring elements of a CSS grid in tailwind-CodePudding

I'm trying to lay out a grid of checkboxes in CSS, using Tailwind CSS. The basic structure is this:

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

So I have an outer div which is the grid, then a series of "content" divs. The first content is 2 lines high (2 checkboxes). The second is one line high (one checkbox).

My problem is that the checkbox in the second grid box is aligned to the top of the box, and I want it centred vertically. I've added background colours so I can see that the div spans the whole height of the previous grid box, but I can find no way of centring the checkbox in the containing div.

Can anyone tell me how to get the effect I want? And more so, can someone explain to me how the box model works in a way that explains why it's not doing what I want? Ideally, I'd like to be able to do this with Tailwind, for consistency, but raw CSS would be OK as well.

CodePudding user response：

Align your items to the center by applying the class items-center to your grid (this method will align all your items and might affect your other child elements in an undesired manner later on when you add more elements to the grid).

<div >

You can also apply either grid or flex to the parent's container, which you want to center vertically (using items-center):

<div >
    <label for="-exact">
        <input type="checkbox" id="-exact" value="-exact"> -exact
    </label>
</div>

<-- or  -->

<div >
    <label for="-exact">
        <input type="checkbox" id="-exact" value="-exact"> -exact
    </label>
</div>

I'm not sure if it exactly answers your question, but the reason the elements stick to the top-left side is that it's still displayed as a block. Changing the parent to a grid doesn't change the display type of child elements.

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

CodePudding user response：

As far as I understood your error, the second div element positions on the top of the whole grid element but you want it to be in the center. Check this snippet out if that's the issue: (I have vertically centered the second grid column)

<!doctype html>
<html>

<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>

  <!--Main grid element with 2 child divs-->
  <div >
    <!--First child div with 2 sub child div displayed as columns-->

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

    <!--Second child with 1 div element, centered in its place-->
    <div >
      <label for="-exact"><input type="checkbox" id="-exact" value="-exact">-exact</label>
    </div>
  </div>
</body>

</html>

Explanation: To place elements in center (or change their position), you have to give it a display name e.g. block, flex, grid etc. Then there are couple ways you could go and center/position your element. The most efficient one would be to use the relevant styles related to the display name. For example:

For Flex model, you'd use justify-content: center which in Tailwind would be justify-center classname to center an element vertically. And to horizontally center it, you'd use align-items: center which in Tailwind would be items-center classname.
For Grid model, you'd use place-items: center which in Tailwind would be place-items-center classname to center an element vertically & horizontally.

These are a bit different for each display property. You can look that up on google if you don't know. Hope that helps.