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

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

在第一列中，我需要将img显示在文本的左侧，而文本是垂直对齐的。我似乎无法找出可以做到的组合。注意：我确实知道图像的高度-它不是动态的。我可以使用span代替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>

最佳答案

这里的关键是宽度的声明。即使将p设置为display，默认情况下inline-block的宽度也将为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 size是可变的，则还需要声明其宽度（百分比或其他值），然后根据该宽度计算p大小
我消除了img标记的末尾与p标记的开始之间的空白，因为默认情况下inline-block将在每个元素的右边添加4px的边距。通过删除标签之间的空白，可以消除空白。


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

Here is a jsFiddle to show it working.

关于html - 如何在创世纪列中的img旁边垂直对齐文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26363002/