Центрирование элемента в элементе (jQuery)
<div class="preview">
<span class="center">This will be centered</div>
</div>
Предварительный просмотр зафиксировал ширину (120x120), но промежуток может содержать что-либо (изображение, текст). Как я центрирую его вертикально и горизонтально использование jQuery? Я искал некоторые отрывки, но они все центрируют элементы в 'теле' не другой элемент. Я хотел бы избежать, используют 'плагин' для этого, если это возможно.
Большое спасибо!
3 ответа
Так как вы не возражаете против использования jQuery, вы можете использовать Center Element Plugin
Это так же просто, как и сделать:
$(".preview").center();
Вы можете использовать решение только для CSS (без IE)
Поскольку вы упомянули, что используете 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
Это установит поле сверху и снизу в ноль, а auto слева и справа, это может быть использовано для выравнивания по центру элемента блока внутри другого элемента блока.
Для того, чтобы отцентровать элемент по вертикали в jquery, вы можете использовать этот
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);