Vertically centring elements of a CSS grid in tailwind

user_34438 0
Viewed 48

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

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

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.

tailwind-css css html
2 Answers

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 class="grid gap-4 sm:grid-cols-3 items-center">

You can also apply either grid or flex to the parent's container, which you want to center vertically (using 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>

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.

user_177185870

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

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.

user_192402810
Related