如何在创世纪列中的img旁边垂直对齐文本？

Question

我研究了类似的问题，并尝试使用display：table-cell; 内联块 vertical-align：居中，但我无法正常工作。 在此示例Genesis主题页面 （请看）中，它使用“一半”和“第一” CSS类演示了列的使用。 使用DevTools / Inspector，您可以像下面所示的那样在段落之前添加<img src="http://placehold.it/140x240"> 。 也许在《创世纪》专栏中有一些东西使它变得比应有的困难，或者更有可能我遗漏了明显的东西。

在第一列中，我需要将img显示在文本的左侧，而文本是垂直对齐的。 我似乎无法找出可以做到的组合。 注意：我确实知道图像的高度-它不是动态的。 如果可以更方便地代替P，我可以使用跨度。

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>

Answer 1

这里的关键是宽度的声明。 即使将display设置为inline-block ，默认情况下p也将具有100％的宽度，因此您需要使用以下内容进行设置：

<h3>Two-Columns</h3>
<div class="one-half first">
  <img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
      This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
  </p>
</div>

注意添加到子级的类，现在应用CSS：

.OneHalfItem {
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.OneHalfText {
    width:calc(100% - 140px);
    padding:10px;
}

现在，通过使用calc ，它的排列变得很漂亮。 几件事情：

• 这很容易实现，因为图片是固定宽度的。 如果img大小是可变的，则还需要声明它的宽度（百分比或其他值），然后根据该值计算p大小
• 我消除了img标记结尾与p标记开头之间的空白，因为默认情况下inline-block将在每个元素的右侧添加4px的边距。 通过删除标签之间的空白，可以消除空白。

请注意，这仅适用于IE9 +（当然是真正的浏览器），因此，如果您需要支持IE8-，则需要通过JS进行相同的宽度计算，但是很容易做到。

这是一个jsFiddle来显示它的工作原理。