0

So I am trying to make a single big number like 99 display on a big circle I've read this and used its code, but the number is not aligned in the exact middle. here's what I have so far:

.circle {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  margin-left: 20px;
  border-radius: 50%;
  font-size: 200px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000;
}
<div class="circle" id="date">99</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Azure
  • 127
  • 11
  • 3
    Easiest way to center both horizontally and vertically: `display: flex; align-items: center; justify-content: center;`. `line-height` isn't necessary. – Lionel Rowe Aug 13 '20 at 13:11
  • I edited the answer in that question you linked to add an actual explanation of how it works: "Setting a line-height the same value as the height of the div will center the text vertically. In this example the height and line-height are 500px." The line height trick is very simple and still a good method for such a straightforward task as centering a single bit of text. The line height just needs to match the height of the div. – misterManSam Aug 13 '20 at 13:22

1 Answers1

1

You're setting the line height to be more than the area height.

line-height: 300px;

Demo

Mitya
  • 33,629
  • 9
  • 60
  • 107