如何在css中创建一个带有数字的头像[重复]答案

【问题标题】：How can I create an avatar with number in the circle in css [duplicate]如何在css中创建一个带有数字的头像[重复]
【发布时间】：2020-02-10 12:29:10
【问题描述】：

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

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

&lt;span class="avatar-number"&gt;1&lt;/span&gt;

【问题讨论】：

当我使用 place-items:center 时为什么不工作？在我的 CSS 中
您拼写了 padding padding。我给你做了一个 sn-p，它在代码编辑器中显示了错误。下次点击[<>]sn-p编辑器自己看看

标签： html css avatar

【解决方案1】：

三个变化：

将padding-left 更改为padding 和
添加text-align: center（用于水平居中）
添加一个等于height 的line-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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：