Как автоматически настроить поля для автоматического центрирования по вертикали и горизонтали, используя jQuery и CSS margin - PullRequest
Новая
       4

Как автоматически настроить поля для автоматического центрирования по вертикали и горизонтали, используя jQuery и CSS margin

0 голосов
/ 02 марта 2012

Я пытаюсь центрировать элемент блока (img или div) в контейнере, который имеет% width и height%.

Вот что я сделал. http://jsbin.com/ibakuw

 $('#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'  
      });
  });  

});

1 Ответ

1 голос
/ 02 марта 2012

Посмотрите мой пример здесь http://jsfiddle.net/z8gph/

Если у меня нет ваших точных настроек, это самый близкий ответ на ваш вопрос.

Сначала расположите внешний и внутренний контейнеры относительно.

Используя jquery для центрирования по вертикали, вы получите высоту внешнего контейнера минус внутренний контейнер и разделите ее на 2. Затем установите верх с .css внутреннего контейнера на результат. 

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

EDIT

посмотрите мой новый пример http://jsfiddle.net/z8gph/1/

Если вы хотите, чтобы он работал без установки margin: 0 auto;, чтобы помочь центрированию по горизонтали, см. Здесь http://jsfiddle.net/z8gph/2/

...