【问题标题】:Centering element inside an element (jQuery)在元素内居中元素(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”内的中心元素,而不是另一个元素。如果可能,我想避免为此使用“插件”。

非常感谢!

【问题讨论】:

    标签: jquery css height center vertical-alignment


    【解决方案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);
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2023-02-03
              • 2011-04-20
              • 2012-03-24
              • 1970-01-01
              • 2023-01-24
              • 2011-05-18
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多