Question

我研究了类似的问题并尝试使用display：table-cell;内联块; vertical-align：遍布整个地方的中间，但我不能让它工作。在这个sample Genesis theme page（请看）中，它使用“一半”和“第一”CSS类来演示列的使用。使用DevTools / Inspector，您可以进入并在段落之前添加<img src="http://placehold.it/140x240">，如下所示。也许Genesis专栏中的某些东西使它变得比它应该更难，或者更可能是我错过了明显的东西。

在第一列中，我需要img出现在文本的左侧，而文本是垂直对齐的。我似乎无法找到能够做到这一点的组合。 NB我确实知道图像的高度 - 它不是动态的。如果更容易代替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设置为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大小是可变的，您还需要声明它的宽度（百分比等），然后根据它计算p大小
我消除了img标记末尾与p标记开头之间的空白区域，因为默认情况下inline-block会在每个标记的右侧添加4px边距元件。通过删除标签之间的空白区域，可以消除空白边缘。

请注意，这只适用于IE9 +（当然还有真正的浏览器），所以如果你需要支持IE8，那么你需要通过JS进行相同类型的宽度计算，但很容易完成。

Here is a jsFiddle to show it working.

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

1 个答案: