1

I'm building a game with a grid of cells with some specific constraints but I can't get the CSS right to do all that:

  • There should be 9 cells in each row (so width: 11.11%).
  • Each cell should have square size (managed with div:before { content: ''; float: left; padding-top: 100%; }).
  • Each cell contains one digit horizontally and vertically centered within the cell.
  • The game should be responsive, so cell's can shrink together with the text on mobile (I'm currently playing with font-size and media queries).

I got up to the point where all of these are ok, except the vertically centering of the text within a cell. Anyone knows what the trick is or if that just isn't possible and I should create images for that?

Koen
  • 3,626
  • 1
  • 34
  • 55

1 Answers1

3

in flex container use: 

justify-content:center
align-items: center

look also on this guide

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345