将元素置于元素内部居中 (jQuery)

Question

<div class="preview">
  <span class="center">This will be centered</div>
</div>

预览具有固定宽度 (120x120)，但跨度可以包含任何内容（图像、文本）。如何使用 jQuery 将其垂直和水平居中？我查找了一些片段，但它们都将元素集中在“主体”内，而不是另一个元素。如果可能的话，我想避免使用“插件”。

非常感谢！

Answer 1

最新的 jQuery UI 有一个位置组件：

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

Doc: http://jqueryui.com/demos/position/
获取：http://jqueryui.com/download

Answer 2

既然你不介意使用 jQuery，你可以使用 Center Element 插件

它就像这样简单正在做：

$(".preview").center();

Answer 3

既然你提到你正在使用 jquery，我假设你想通过 javascript 来做到这一点。您可以使用 Jquery 将样式添加到 DOM 中的元素。您可以使用

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/vertical-alignment-of-contents-inside-an-element-using-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);

Answer 4

您可以使用仅 CSS 的解决方案（忽略 IE）

这将居中

使用 display:block 也可以工作，但仅适用于水平对齐，对于垂直对齐，您需要按照上面的代码模拟表格，或者使用 JavaScript。

Answer 5

您可以将自己的函数添加到 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 置于屏幕中央

Answer 6

你可以使用 CSS 来做到这一点。
这篇文章提供了一个很好的解决方案 - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizo​​ntally-using-css/

基本上：

1.将子项设置为绝对位置。
2。将父级设置为相对位置。
3。将子项的左侧和顶部设置为 50%。
4。 Translation(-50%,-50%) 向左和顶部移动子元素宽度的一半。