How can I create an avatar with number in the circle in css

Question

I want to create a numbers inside circle as an avatar in the circle. MY result using the below css and my html did not end up with good output. can you help with this please? So my css is like below.

.avatar-number {
  display: grid;
  padding-left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ccFF;
}

<span class="avatar-number">1</span>

Answer 1

Use line-height to centre align horizontally and vertically.

Try this: https://jsfiddle.net/ze1h7m6v/

.avatar-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
  text-align: center;
  background: #000;
  display: inline-block;
}