css 圆圈内有数字怎么创建头像

Question

我想在圈内创建一个数字作为圈内头像。我使用下面的 css 和我的 html 结果并没有得到很好的输出。你能帮忙吗？所以我的 css 如下所示。

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

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

Answer 1

使用line-height水平和垂直居中对齐。

试试这个：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;
}

Answer 2

如果我理解你的问题，这是一个可行的解决方案。您需要为容器设计样式，而不是 span 本身！ [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

Answer 3

三个变化：

将padding-left更改为padding和
添加text-align: center（用于水平居中）
添加一个 line-height 等于 height（用于垂直居中）

工作示例：

.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>

css 圆圈内有数字怎么创建头像

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

html

css

avatar