如何使用文本块垂直居中图像？

Question

我有一个文本块和图像，您可以看到here（该站点尚未上线）。

我想将右侧的图像居中在文本块的垂直中间。

我目前使用的代码如下。正如您将看到的，我尝试在两个divs 上使用display-inline:block; vertical-align:middle，但它似乎没有达到预期的效果。

    <div class="x-column vc one-half" style="font-size:128%; display-inline:block; vertical-align:middle;">
    <p class="p1">The electronics we pick up are transported to our state-of-the-art recycling facility in Brampton,Ontario. As the trucks are unloaded, each company’s material is independently weighed, allowing us to issue a customized Certificate of Recycling for diverted material. Electronics are then sorted into various grades that are either mechanically shredded or manually dismantled. Shift Recycling is an OES-approved primary processor, meaning that our recycling facility is fully compliant with all environmental regulations. Any hazardous materials such as lead glass are handled in a manner safe for the environment and our employees.</p>
    <p class="p2">At the end of our recycling process, we send our raw commodities such as plastic and metal<em> (where?)</em>. These items are sent to approved downstream refiners who melt them down to create new products including plastic outdoor furniture and metal construction rebar.</p>
</div>
<div class="x-column vc one-half" style="display-inline:block; vertical-align:middle;">
    <img class="x-img center-text x-img-rounded none" style=" margin-left: auto; margin-right: auto; " src="http://click2recycle.ca/wp-content/uploads/2014/05/plantSmall.png" alt="The Recycling Facility">
</div>

编辑

我已经尝试了以下两个建议，但不幸的是，页面现在看起来像 this，图片位于文本列下方。我应该提到我正在使用 WordPress 主题（称为 X）来构建这个站点，我现在开始担心它是问题的一部分。是否有任何我可以提供的更多信息可能会有所帮助？

Answer 1

你使用了错误的选择器名称，应该是

display: inline-block;

此外，您应该指定两个块的宽度，例如。 G。 40% 和 50%

PS：我建议您避免在 HTML 中使用内联样式，最好将样式指定到单独的 .css 文件中，如下所示：

.x-column {
    display: inline-block;
    vertical-align: middle;
    width: 49%;
}

.x-column img {
    width: 90%;
}

Answer 2

您需要对显示属性进行快速更正：

display: inline-block;

这是您想要完成的任务。 http://jsfiddle.net/pZb3Y/1/