如何在页面上垂直居中我的图像

Question

如果您向下滚动到此page上标题为“我们的回收电子产品资格”的子部分，您将看到3个代表不同资格的图形。我想确保它们在列中水平居中并且每个都垂直居中。我有第一部分，但我正在努力与第二部分。任何帮助，将不胜感激。

Answer 1

您想要JS或CSS解决方案吗？

CSS：on＃x-content-band-19

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

Javascript：只需取这3个div的容器高度，得到每个孩子的高度，减去差值并除以2.就好了。

var ph = $('#x-content-band-19').height();
var ih = $('img').height();

$('img').css({top : (ph - ih) / 2 });

Answer 2

除非我误解，否则简单display: flex;和align-items: center; 在div#x-content-band-19上（图像的父母）就足够了。

Answer 3

Here是CSS技巧中的一个很好的链接。希望这会有所帮助...

CSS中的vertical-align属性控制一行中彼此相邻的元素排列方式。

img {
  vertical-align: middle;
}