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>

why not working when I used the place-items:center; in my css — Clickmit Wg, Oct 13 '19 at 20:00
You spelled padding pading. I made you a snippet which showed the error in the code editor. Next time click the `[<>]` snippet editor and see for yourself — mplungjan, Oct 13 '19 at 20:03

score 1 · Accepted Answer · answered Oct 13 '19 at 20:06

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;
}

Rounin · Answer 2 · 2019-10-14T07:37:50.980

Three changes:

Change padding-left to padding and
Add text-align: center (for horizontal centering)
Add a line-height equal to the height (for vertical centering)

Working Example:

.avatar-number {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 2px;
  text-align: center;
  border-radius: 50%;
  background: #ccccff;
}

<span class="avatar-number">1</span>
<span class="avatar-number">2</span>
<span class="avatar-number">3</span>
<span class="avatar-number">4</span>
<span class="avatar-number">5</span>
<span class="avatar-number">6</span>

score 0 · Answer 3 · answered Oct 13 '19 at 20:06

Here is a working solution if I understood your question. You need to style a container, not the span itself! [https://codepen.io/Zeldocarina/pen/oNNbJeX][1]

HTML: <div class="avatar"><span class="avatar__number">1</span></div>

CSS:

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
  height: 200px;
  border-radius: 50%;
  background:#ccFF;
}

.avatar .avatar__number {
    font-family: sans-serif;
    color: grey;
    font-size: 3rem;
}


  [1]: https://codepen.io/Zeldocarina/pen/oNNbJeX

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

3 Answers3