html - 如何使用骨架网格垂直对齐图像旁边的文本

Question

我正在尝试将图像与 THIS PAGE 上“顾问委员会”选项卡上的文本垂直对齐.

缩短的 html:

<div class="four columns alpha"><img class="ImageBorder" src="LINK" alt="" /></div>
<div class="twelve columns omega">
<p class="padding">TEXT</p>
</div>
</div>

我已经尝试了提供的一些多行解决方案 HERE ，但无法使文本/图像正确排列。有没有用网格系统做到这一点的好方法？

谢谢!

Answer 1

这里是你需要添加的:

.omega{
   display: inline-block;
   float: none;
   margin-left: 0;
   vertical-align: middle;
}

.alpha{
  display: inline-block;
  float: none;
  vertical-align: middle;
}