在元素内居中元素（jQuery）

Posted 2023-03-05

【中文标题】在元素内居中元素（jQuery）

【英文标题】：Centering element inside an element (jQuery)

【发布时间】：2010-12-29 13:46:04

【问题描述】：

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

Preview 具有固定宽度 (120x120)，但 span 可以包含任何内容（图像、文本）。如何使用 jQuery 将其垂直和水平居中？我查找了一些 sn-ps，但它们都是“body”内的中心元素，而不是另一个元素。如果可能，我想避免为此使用“插件”。

非常感谢！

【参考方案1】：

您可以使用 CSS 来做到这一点。这篇文章提供了一个很好的解决方案 - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ 基本上： 1。将孩子设置为绝对位置。 2。将父级设置为相对位置。 3。将孩子的左侧和顶部设置为 50%。 4。 translate(-50%,-50%) 左移和上移子元素宽度的一半。

【参考方案2】：

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

就这么简单：

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

【参考方案3】：

您可以将自己的函数添加到 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();

从Using jQuery to center a DIV on the screen的代码中获取概念

【参考方案4】：

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

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

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

【讨论】：

我不知道为什么这是-1。这正是我想要的。超级简单！希望我能早点知道 ui.position ！谢谢雨果。

他使用的是 Jquery，而不是 Jquery UI。为简单的居中添加Jquery UI的权重是不合理的。

android.nick - 他有没有特别说他没有使用 jquery UI？ +1 这对我来说非常有用，已经在使用 jquery ui 并且正在玩弄另一个不起作用的居中库。谢谢雨果

我刚刚将 UI 位置模块从 UI 包中取出。它可以在没有任何其他 jQuery UI 库的情况下工作。只需使用您需要的。

【参考方案5】：

您可以使用纯 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。

【参考方案6】：

既然您提到您正在使用 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);