How do I vertically center elements within a grid cell?

Question

so I'm trying to vertically align a and element within grid cells. Was wondering if there is any way to do this without using padding, as I was the elements to be centered regardless of the size of the grid cell

I've tried using "vertical-align: middle" but that doesn't seem to do anything

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class = "grid">
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
    </div>
  </body>
</html>

CSS:

.grid {
  display: grid;
  border-top: 1px black solid;
}

.grid_item {
  border: 1px black solid;
  border-top: none;
  height: 50px;
}

.grid_item span, .grid_item input {
  position: relative;
  vertical-align: middle;
}

I expect this to center the elements vertically but it seems to have no effect

score 2 · Answer 1 · answered Jan 25 '19 at 06:50

2

try using the display flex property to align items

.grid_item {
border: 1px black solid;
border-top: none;
height: 50px;
display: flex;
align-items: center;

}

answered Jan 25 '19 at 06:50

Rajesh

254
1
6

score 1 · Answer 2 · answered Jan 25 '19 at 06:50

For that you can use line-height:50px It will center the text with relative to your parent height. Used 50px beacause height is 50px;

.grid {
  display: grid;
  border-top: 1px black solid;
}

.grid_item {
  border: 1px black solid;
  border-top: none;
  height: 50px;
  line-height:50px
}

.grid_item span, .grid_item input {
  position: relative;
  vertical-align: middle;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class = "grid">
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
    </div>
  </body>
</html>

score 1 · Answer 3 · answered Jan 25 '19 at 08:02

.grid {
  display: grid;
  border-top: 1px black solid;
}

.grid_item {
  border: 1px black solid;
  border-top: none;
  height: 50px;
  display:flex;
  align-items:center;
}

.grid_item span, .grid_item input {
  position: relative;
  vertical-align: middle;
}

<div class = "grid">
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
      <label class = "grid_item">
        <input type = "checkbox" name = "check">
        <span>text</span>
      </label>
    </div>

you can use display:flex and align-items:center on grid_item to make it center hope it helps

score 0 · Accepted Answer · answered Jan 25 '19 at 06:57

You could set display: flex; on the .grid_item parent, and set margin top and bottom to auto on the .grid_item input and .grid_item span :

.grid_item {
  border: 1px black solid;
  border-top: none;
  height: 50px;
  display: flex;
}

.grid_item input, .grid_item span {
  margin-top:auto;
  margin-bottom:auto;
}

How do I vertically center elements within a grid cell?

4 Answers4