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:
<div class="grid">
<a class="grid-item" href = 'linka'><span>Text A</span></a>
<a class="grid-item" href = 'linkb'><span>Text B</span></a>
<div class="grid-item" ><span>Company Logo</span></div>
<a class="grid-item" href = 'linkc'><span>Text C</span></a>
<a class="grid-item" 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.
3 answers
solution1
2 ACCPTED 2022-07-15 15:49:17
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/
solution2
1 2022-07-15 16:35:14
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 class="grid"> <a class="grid-item" href = 'linka'> <span> Text A </span> </a> <a class="grid-item" href = 'linkb'> <span> Text B </span> </a> <div class="grid-item" > <span> Company Logo </span> </div> <a class="grid-item" href = 'linkc'> <span> Text C </span> </a> <a class="grid-item" href = 'linkd'> <span> Text D </span> </a> </div> </body> </html>
solution3
0 2022-07-15 15:56:42
you could set the circles to be position: relative; and the text to position: absolute; top: 0; bottom: 0; position: absolute; top: 0; bottom: 0;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.