html – 使用内嵌块时如何使两个块水平？

.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;将跨文本放在我的img旁边.
但是,图像位于我的跨度的左下角.

如何使他们水平？

解决方法

使用垂直对齐：顶部到您的图像.

.roles img
{
    vertical-align:top;
}

看看这个小提琴：http://jsfiddle.net/gox5droc/

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