内联块与文本对齐

Question

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

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

请参阅http://jsfiddle.net/Cr952/了解我的意思。

有什么想法可以调整它们吗？感谢。

Answer 1

将vertical-align: bottom添加到i.avatar。

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

Fiddle

Answer 2

在i css中添加vertical-align:bottom

Answer 3

这是你想要的吗？

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