如何垂直居中我的图像？

Question

我这里有一个页面 - http://click2recycle.ca/。如果你看一下标题为“免费提取和回收大量电子产品”的部分，就会看到一辆卡车的图片。它垂直居中于左右两侧的图像中点。

我这里也有一个页面 - http://vmmed.com/service/?page_id=7。如果您查看标题“我们的认证和关联”下的部分，您将看到一个名为CAR（中间徽标）的组织的徽标。尽管我付出了最大的努力，但它并没有垂直居中于左右图像的中点。

我使用Chrome的Inspect Element功能比较了CSS，但我似乎无法找到差异。

有什么想法吗？

Answer 1

很多人都在评论修复，但我认为最初的问题是为什么两者是不同的。我发现了同样的东西并且也很感兴趣（使用Chrome）为什么两者表现不同。

首先，这是差异（使用Chrome） - 我添加了一个红色边框，直观地显示它们不是顶部对齐。

http://vmmed.com/service/?page_id=7

和http://click2recycle.ca/

现在，当您在Firefox中查看这两个页面时，您会看到：

和

同样，这两个都来自Firefox，并表明它们都是顶对齐的。那有什么区别？

那时我在一个页面上注意到inline style（http://click2recycle.ca/）而在另一页上没有注意到：

-webkit-box-align: center;
-webkit-box-pack: center;

（有关框对齐的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-align）

这就是为什么两者不同！ （以及为什么它特定于Chrome - 因为供应商前缀）。

希望这有帮助！

Answer 2

有几种方法可以做到这一点。 最简单的可能是在其包含的div中添加padding-top，并在某个屏幕分辨率下通过媒体查询（注意到它是响应式的）将其删除。

或者，看看我成功使用过几次的example，但是在所有使用空元素的浏览器中使用display:inline

Answer 3

添加css

top:30px;

到具有Xpath的元素：

//*[@id="x-content-band-10"]/div[2]

（div ＆＃34; x-column vc 1/3＆＃34; ）

Answer 4

这修复了它，应该让它响应。将其放入CSS中

.center-block {
margin-top: 2.25em;