How do I use CSS to center text vertically in a circle

Question

I have a grid of circles, and in each circle I am trying to display text that is vertically centered. No matter what I try, nothing has worked so far.

Code is on codepen: https://codepen.io/slurmclassic/pen/bGvBJPJ

My HTML looks this this:


  Text A
  Text B
  Company Logo
  Text C
  Text D

My CSS looks like this:

.grid {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  background: #CCC;
}
.grid::after {
  content: "";
  display: block;
  clear: both;
}
.grid-item {
  text-decoration: none;
  overflow: hidden;
  width: 48%;
  padding-bottom: 48%;
  background-color: rgba(124, 139, 224, 0.8);
  border-radius: 50%;
  float: left;  
  margin: 1%;
  margin-top: -4%;
  color: black;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item > span { 
  color: black;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  align-items: center;
  justify-content: center;  
  text-align: center;  
}

.grid-item:nth-child(1),
.grid-item:nth-child(2) {
  margin-top: 1%;
}

.grid-item:nth-child(3n + 3) {
  margin-left: 25%;
}

.grid-item:nth-child(3n + 4) {
  clear: left;
}

I have tried to put the text in spans so that I can try to attack the problem separately from the 'grid-item' class but that hasn't helped.

I could brute force by applying a transform that shifts the text down but there must be a better way to do this.

I've tried text-align: center, align-items: center, justify-content: center, vertical-align: middle. I've tried setting the line-height equal to the font-size but that didn't help either.

Any ideas would be appreciated, and any demonstratable solutions too, thanks.

user_4816468 · Answer

I believe the problem here is the padding-bottom on .grid-item. Try replacing it with aspect-ratio: 1/1;

If you need to support something not compatible aspect-ratio you might try to use a pseudo-element like ::after with padding-bottom: 100% to do the aspect-ratio trick. More about this: https://css-tricks.com/aspect-ratio-boxes/

user_19557324 · Answer

I made some changes in the css but the result is the desired one.




  
  HTML
  
  



    

    

    
        
            
                Text A
            
        
        
            
                Text B
            
        
        
            
                Company Logo
            
        
        
            
                Text C
            
        
        
            
                Text D

user_19140003 · Answer

you could set the circles to be position: relative; and the text to position: absolute; top: 0; bottom: 0;

How do I use CSS to center text vertically in a circle

3 Answers