Question

我正在尝试将块元素（img或div）居中到具有％width和height％的容器。

 $('#container img')
    .css({
      'margin': ($('#container').height() - $('#container img').height()) / 2 + 'auto', 
      'background':'red'});

我不想使用此{position:absolute; top:50%; height:240px; margin-top:-120px; } 因为元素溢出我的浏览器或容器，所以垂直居中。我只需要在浏览器中约束它。

请帮忙。谢谢！

编辑：

我在这里添加了$(window).resize(function() { http://jsbin.com/ibakuw/5

var contHeight = $('body').height(),
    paddVertical = ($('#container').height() - $('#container img').height()) / 2,
    paddHorizon =  ($('#container').width() - $('#container img').width()) / 2;

$(function() {

  $('#container img')
    .css({
      'marginLeft' : paddHorizon +'px',
      'marginTop' : paddVertical +'px'  
    });


  $(window).resize(function() {
    $('#container img')
      .css({
        'marginLeft' : paddHorizon +'px',
        'marginTop' : paddVertical +'px'  
      });
  });  

});

Answer 1

在此处查看我的示例http://jsfiddle.net/z8gph/

除非我有你的确切设置，否则这是我能回答你的最接近的问题。

首先将外部和内部容器相对放置。

使用jquery垂直居中，获得外部容器的高度减去内部容器，然后除以2.然后将内部容器的.css顶部设置为结果。

var center = ($("#outer").height()-$("#inner").height()) / 2;
$("#inner").css({"top":center});

修改

查看我的新示例http://jsfiddle.net/z8gph/1/

如果您希望它在不设置margin: 0 auto;的情况下工作，以帮助水平居中，请参阅此处http://jsfiddle.net/z8gph/2/

如何自动调整边距到自动中心垂直＆amp;使用jQuery和CSS边距水平

1 个答案: