jquery - 如何使用 jQuery 和 CSS 使 HTML 元素居中？

Question

我想在我的 html 页面中居中一些 html 元素，例如标签。我想通过使用 jQuery 和 CSS 来实现这一点。不幸的是，我不熟悉 jQuery。

我只是需要你们一点帮助。

谢谢你。

Answer 1

试试这个简单的功能：

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

//Use the above function as:
$(element).center();

Answer 2

演示不是jQuery 的任务。

CSS：

label {display:block;text-align:center}

Answer 3

我同意最好的方法是通过纯 css，但这是一种非常暴力的方法......

HTML

<div id="centerme">content</div>

CSS

#centerme {
  position: absolute;
}

jQuery

$(window).onLoad(this.resize);
$(window).resize(this.resize);

resize = function() {
  var center = ($(window).width/2) - ($('#centerme').width/2);
  $('.centerme').css('left', center+'px');
} 

Answer 4

检查此演示http://jsfiddle.net/yeyene/tGbxj/1/

jQuery

$(document).ready(function() {
    verCenter('#red');
    verCenter('#blue');
    
    $(window).resize(function(){
        verCenter('#red');
        verCenter('#blue');
    });
});

function verCenter(element){
    var ver_top = ($(window).height() - $(element).height()) / 2;
    $(element).css( "margin-top", ver_top+'px' );
}