Question

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

我想将图像置于文本块垂直中间右侧的中心。

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

    <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/

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

2 个答案: