Css 内联块与文本对齐

我有一个内联块元素和一些文本在同一行上。它们似乎不在同一条基线上对齐

<div>
  <i class="avatar"></i>
  <span>Name</span>
</div>

i.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  border: 2px solid black;
}
span {
  display: inline-block;
  border: 2px solid black;
}

名称
i、 化身{
显示：内联块；
宽度：50px；
高度：50px；
框大小：内容框；
边框：2件纯黑；
}
跨度{
显示：内联块；
边框：2件纯黑；
}

请明白我的意思

---

有什么想法来调整它们吗？谢谢。

在iCSS中添加

垂直对齐：底部

将

垂直对齐：底部

添加到

i.avatar

i.avatar {
  display: inline-block;
  width: 50px;
  height: 50px;
  box-sizing: content-box;
  border: 2px solid black;
  vertical-align: bottom;
}

这就是你想要的吗

然后使用

float:left

，如下所示

CSS

i.avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid black;
    float: left;
}
span {
    display: inline-block;
    border: 2px solid black;
    float: left;
}

---

谢谢这就是我想要的。