CSS Grid Centering

Question

I have a problem vertically aligning center/middle in a grid cell.

I have the following code:

.grid-container {
  display: grid;
  width:100%;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  color: black;
}

.itemBox {
  border: 1px solid black;
  box-sizing: content-box;
  text-align: center;
  vertical-align: middle;
}

   <div class="grid-container tab active" id="pageHome">
      <div class="itemBox content">1</div>
      <div class="itemBox"><span class="test">2</span></div>
      <span class="itemBox">3</span>
      <div class="itemBox s4x1">4</div>
      <div class="itemBox s1x2">5</div>
      <div class="itemBox">6</div>
      <div class="itemBox">7</div>
      <div class="itemBox">8</div>  
      <div class="itemBox s1x2">9</div>
      <div class="itemBox">10</div>
      <div class="itemBox">11</div>  
      <div class="itemBox">12</div>  
    </div>

this produces

But i cannot get the numbers to be centered in the boxes without the border collapsing to the middle as well like this:

if i add

align-items: center;

Any idea how to solve this?

Please show your html as well. preferably as a [MCVE] – Jon P May 25 '21 at 07:18 — Jon P, May 25 '21 at 07:18
Ive updated the question with the needed html – Stig May 25 '21 at 07:34 — Stig, May 25 '21 at 07:34

score 0 · Answer 1 · answered May 25 '21 at 07:47

0

use some line height for your .itemBox class

 .itemBox {
            border: 1px solid white;
            box-sizing: content-box;
            text-align: center;
            vertical-align: middle;
            line-height:100px;
        }

answered May 25 '21 at 07:47

Sandeep K Goyal

280
2
9

score 0 · Accepted Answer · answered May 25 '21 at 07:57

You can use display:flex to achieve this

.grid-container {
  display: grid;
  width:100%;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  color: black;
}
.s2 {
grid-row: span 2;
}
.itemBox {
  border: 1px solid black;
  box-sizing: content-box;
  display:flex;
  justify-content: center;
  place-items: center stretch;
}

<div class="grid-container tab active" id="pageHome">
      <div class="itemBox content">1</div>
      <div class="itemBox"><span class="test">2</span></div>
      <span class="itemBox">3</span>
      <div class="itemBox s1">4</div>
      <div class="itemBox s2">5</div>
      <div class="itemBox">6</div>
      <div class="itemBox">7</div>
      <div class="itemBox">8</div>  
      <div class="itemBox s1x2">9</div>
      <div class="itemBox">10</div>
      <div class="itemBox">11</div>  
      <div class="itemBox">12</div>  
    </div>

score 0 · Answer 3 · answered May 25 '21 at 08:16

0

.itemBox {
 border: 1px solid white;
 height: 100px;
 line-height: 100px;
 text-align: center;
}

To vertically align text inside div you have to make the "line-height" property is equal to the height of the div container.

answered May 25 '21 at 08:16

Ravinandan

24
1
4

CSS Grid Centering

3 Answers3