html - 使用内联 block 时如何使两个 block 水平？

Question

.roles span {
  display:inline-block;
  width:80px;
}

<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

我正在使用 display:inline-block; 将 span 文本放在我的 img 旁边。 但是，图像位于我的跨度的左下角。

如何让它们水平？

Answer 1

对您的图片使用 vertical-align:top。

.roles img
{
    vertical-align:top;
}

看看这个 fiddle :http://jsfiddle.net/gox5droc/

这将确保图像在 div 顶部对齐。