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

发布时间：2020-12-14 19:01:12 所属栏目：资源来源：网络整理

导读：.roles span { display:inline-block; width:80px;} div class="roles" img alt="test" src="images/02_button_add.png" spanAlexAlexAl exAlexAlex AlexAlexAlex /span/div 我正在使用display：inline-block;将跨文本放在我的img旁边. 但是,图像位于我的跨

.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顶部对齐.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!