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

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:

<div >
  <a   href = 'linka'><span>Text A</span></a>
  <a   href = 'linkb'><span>Text B</span></a>
  <div  ><span>Company Logo</span></div>
  <a  href = 'linkc'><span>Text C</span></a>
  <a  href = 'linkd'><span>Text D</span></a>
</div>

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.

CodePudding user response：

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/

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .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: 200px;
        height: 200px;
        background-color: rgba(124, 139, 224, 0.8);
        border-radius: 50%;
        float: left;  
        margin: 5%;
        margin-top: -4%;
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .grid-item > span { 
        color: black;

    }

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

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

    .grid-item:nth-child(3n   4) {
        clear: left;
    }
  </style>
</head>

<body>
    <br>
    <br>
    <div >
        <a   href = 'linka'>
            <span>
                Text A
            </span>
        </a>
        <a   href = 'linkb'>
            <span>
                Text B
            </span>
        </a>
        <div  >
            <span>
                Company Logo
            </span>
        </div>
        <a  href = 'linkc'>
            <span>
                Text C
            </span>
        </a>
        <a  href = 'linkd'>
            <span>
                Text D
            </span>
        </a>
      </div>
</body>
</html>

CodePudding user response：

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