html - 如何垂直对齐 Genesis 列中 img 旁边的文本？

Question

我研究过类似的问题并尝试使用 display:table-cell;行内 block ； vertical-align:middle 到处都是，但我无法让它工作。在这个sample Genesis theme page (请看)，它演示了使用“二分之一”和“第一”CSS 类的列的使用。使用 DevTools/Inspector，您可以进入并添加 <img src="http://placehold.it/140x240">在我下面显示的段落之前。也许 Genesis 专栏中有些东西让这比它应该的更难，或者更有可能我错过了显而易见的东西。

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

这里的关键是宽度的声明。 p 默认情况下将具有 100% 宽度，即使您将 display 设置为 inline-block，因此您需要使用类似这个:

<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 进行相同类型的宽度计算，但很容易完成。

Here is a jsFiddle to show it working.