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' );
}