使用jquery设置百分比margin-top

Question

我有各种尺寸的图像，有些是风景，有些是肖像。 当我在灯箱中显示图像时，我想不断更改margin-top以使图像完美地位于屏幕中央。

我真的想使用％作为我的保证金，因为它在所有尺寸的屏幕上看起来都不错。

我使用了代码：

$('img').css("margin-top",10%);

但计算机似乎不喜欢百分比值。如果我使用像素值，它工作正常。关于如何通过jQuery设置百分比差距的任何想法。

Answer 1

百分比应该作为字符串传递，如下所示：

$('img').css("margin-top","10%");

Answer 2

使用绝对中心css，DEMO https://jsfiddle.net/cda1knzq/

调整结果框的大小，无论如何，都会看到它位于中心位置。

CSS

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

*将此课程提供给您想要成为中心的元素，例如：div，img等......

Answer 3

如果您想垂直居中图像，请使用： -

CSS： -

img{ top:50%; position:absolute;}

Jquery的： -

var m_top = $('img').height()/2
$('img').css('margin-top','-' + m_top + 'px');