html - 我的 CODE 中的 CSS 对齐有什么问题

Question

我试图让 Z 出现在圆圈的中间，但我不确定为什么它没有出现在中间。我的代码输出这个

<li class="avatar"><span class="profile-initials">Z</span></li>

这是我的应用程序中的 CSS

.avatar {
    vertical-align: middle;
    width: 20px;
    background-color: white;
    height: 25px;
    border-radius: 50%;
    padding-left: 18px;
    padding-bottom: 10px;
    float: right;
    margin: 10px;
}


.profile-initials {
    margin-right: 2px;
}

Answer 1

如果不查看所有代码就很难判断，但使用 flexbox 之类的 CSS 可能会简单得多。至于您的代码，您的 padding left 和 padding bottom 似乎将其推出框架，而您和边界半径只是让它看起来像是在圆圈之外。这是我很快想到的，希望对您有所帮助。

li {
  background-color: #000;
  color: #fff;
  width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
}

.name {
  flex-grow: 2;
  padding-left: 18px;
}

.icon {
  margin-right: 18px;
  background-color: #fff;
  padding: 10px;
  color: #000;
  border-radius: 50%;
}

<ul>
  <li><span class="name">Veris Veritatis</span><span class="icon">Z</span></li>
</ul>