如何垂直對齊圖像旁邊的文本與骨架網格

Question

我正在嘗試將圖像與此頁面上的“顧問委員會”選項卡上的文本垂直對齊。

縮短的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>

我已經嘗試了一些這里提供的多行解決方案，但無法正確排列文本/圖像。 有一個很好的方法來使用網格系統嗎？

謝謝！

Answer 1

以下是您需要添加的內容：

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

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