我的代码中的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可能要简单得多。 对于您的代码，似乎您的左侧填充和底部填充正在将其推出框架，并且您的边框半径使它看起来像是在圆的外部。 这是我很快想到的，希望对您有所帮助。

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>