Центрирующий элемент внутри элемента (jQuery) - PullRequest
Новая
       36

Центрирующий элемент внутри элемента (jQuery)

10 голосов
/ 23 декабря 2009 
<div class="preview">
  <span class="center">This will be centered</div>
</div>

Предварительный просмотр имеет фиксированную ширину (120x120), но диапазон может содержать что угодно (изображение, текст). Как мне отцентрировать по вертикали и по горизонтали , используя jQuery ? Я посмотрел некоторые фрагменты, но все они центральные элементы внутри «тела», а не другой элемент. Я хотел бы избежать использования «плагина» для этого, если это возможно.

Большое спасибо!

Ответы [ 6 ]

14 голосов
/ 03 сентября 2010

Последний пользовательский интерфейс jQuery имеет компонент позиции: 

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Документ: http://jqueryui.com/demos/position/
Получите: http://jqueryui.com/download

4 голосов
/ 23 декабря 2009

Поскольку вы не возражаете против использования jQuery, вы можете использовать Плагин центрального элемента

Это так же просто, как сделать: 

$(".preview").center();
3 голосов
/ 23 декабря 2009

Поскольку вы упомянули, что используете jquery, я предполагаю, что вы хотели бы сделать это через javascript. Вы можете добавить стили к элементам в DOM, используя Jquery. Вы можете использовать

http://docs.jquery.com/CSS/css#properties

  $(.center).css({'display' : 'block', 'text-align' : 'center'});

В зависимости от элемента вы можете центрировать его без использования text-align: center, если вы установите поле на 

margin: 0 auto 0 auto

Это установит поле сверху и снизу равным нулю, и автоматически слева и справа, это можно использовать для центрирования элемента блока внутри другого элемента блока.

Чтобы центрировать элемент по вертикали в jquery, вы можете использовать это

http://cool -javascripts.com / JQuery / вертикального выравнивания содержимого из-внутри--ан-элемент-с помощью-jquery.html 

    function ($) {
    $.fn.vAlign = function(container) {
        return this.each(function(i){
    if(container == null) {
       container = 'div';
    }
    var paddingPx = 10; //change this value as you need (It is the extra height for the parent element)
    $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
    var el = $(this).children(container + ":first");
    var elh = $(el).height(); //new element height
    var ph = $(this).height(); //parent height
    if(elh > ph) { //if new element height is larger apply this to parent
        $(this).height(elh + paddingPx);
        ph = elh + paddingPx;
    }
    var nh = (ph - elh) / 2; //new margin to apply
    $(el).css('margin-top', nh);
        });
     };
})(jQuery);
2 голосов
/ 24 декабря 2009

Вы можете использовать решение только для CSS (игнорируя IE)

<div class="preview" style="display:table-cell;vertical-align:middle;text-align:center;margin:0 auto"> <span class="center">This will be centered</div> </div> использование display: block также будет работать, но только для горизонтального выравнивания, для вертикального выравнивания вам либо потребуется эмулировать таблицу в соответствии с приведенным выше кодом, либо использовать JavaScript.

1 голос
/ 27 ноября 2012

Вы можете добавить свою собственную функцию в jquery: 

// Centers on div
jQuery.fn.center = function (div) {
this.css("position", "absolute");

var position = div.position();
this.css("top", Math.max(0, ((div.height() - this.outerHeight()) / 2) + position.top) + "px");

this.css("left", Math.max(0, ((div.width() - this.outerWidth()) / 2) + position.left) + "px");
return this;
};

Использование: 

$('#ajxload').center($('#mapWrapper')).show();

Взял концепцию из кода на Использование jQuery для центрирования DIV на экране

0 голосов
/ 11 февраля 2015

Вы можете сделать это с помощью CSS.
Это сообщение дает хорошее решение - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/
В основном:
1. Установите ребенка в абсолютное положение.
2. Установите родителя в положение относительное.
3. Установите ребенка слева и сверху на 50%.
4. перевести (-50%, - 50%), чтобы сместить влево и вверх на половину ширины дочернего элемента.

...