css - 行内 block 与文本对齐

Question

我有一个行内 block 元素和一些文本在同一行。它们似乎不符契约(Contract)一基线。

<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