<div>jQueryを使用して画面の中央にaを設定するにはどうすればよいですか?
529500 次
28 に答える
1079
jQueryに関数を追加するのが好きなので、この関数が役立ちます:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
これで、次のように書くことができます。
$(element).center();
デモ: Fiddle (パラメータを追加)
于 2008-10-17T00:22:07.140 に答える
148
ここにjqueryプラグインを入れます
非常に短いバージョン
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
短縮版
(function($){
$.fn.extend({
center: function () {
return this.each(function() {
var top = ($(window).height() - $(this).outerHeight()) / 2;
var left = ($(window).width() - $(this).outerWidth()) / 2;
$(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
});
}
});
})(jQuery);
このコードでアクティブ化:
$('#mainDiv').center();
プラグインのバージョン
(function($){
$.fn.extend({
center: function (options) {
var options = $.extend({ // Default values
inside:window, // element, center into window
transition: 0, // millisecond, transition time
minX:0, // pixel, minimum left element value
minY:0, // pixel, minimum top element value
withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
vertical:true, // booleen, center vertical
horizontal:true // booleen, center horizontal
}, options);
return this.each(function() {
var props = {position:'absolute'};
if (options.vertical) {
var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
top = (top > options.minY ? top : options.minY);
$.extend(props, {top: top+'px'});
}
if (options.horizontal) {
var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
left = (left > options.minX ? left : options.minX);
$.extend(props, {left: left+'px'});
}
if (options.transition > 0) $(this).animate(props, options.transition);
else $(this).css(props);
return $(this);
});
}
});
})(jQuery);
このコードでアクティブ化:
$(document).ready(function(){
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
);
そうですか？
アップデート ：
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
于 2010-02-13T13:21:46.077 に答える
63
jQueryUI Position ユーティリティをお勧めします
$('your-selector').position({
of: $(window)
});
これにより、センタリングだけよりもはるかに多くの可能性が得られます...
于 2010-12-10T11:08:42.703 に答える
40
これが私のやり方です。結局、ライトボックスのクローンに使用しました。このソリューションの主な利点は、ウィンドウのサイズが変更されても要素が自動的に中央に配置されるため、この種の使用に最適です。
$.fn.center = function() {
this.css({
'position': 'fixed',
'left': '50%',
'top': '50%'
});
this.css({
'margin-left': -this.outerWidth() / 2 + 'px',
'margin-top': -this.outerHeight() / 2 + 'px'
});
return this;
}
于 2012-01-22T08:24:31.007 に答える
27
次のように、CSS だけを使用して中央に配置できます。
.center{
position: absolute;
height: 50px;
width: 50px;
background:red;
top:calc(50% - 50px/2); /* height divided by 2*/
left:calc(50% - 50px/2); /* width divided by 2*/
}<div class="center"></div>calc()CSS で基本的な計算を行うことができます。
于 2013-06-28T15:16:54.330 に答える
15
@TonyL から提供された素晴らしい回答を拡張しています。値をラップするために Math.abs() を追加しています。また、たとえば WordPress のように、jQuery が「競合なし」モードになっている可能性があることも考慮しています。
以下で行ったように、上と左の値を Math.abs() でラップすることをお勧めします。ウィンドウが小さすぎて、モーダル ダイアログの上部にクローズ ボックスがある場合、これにより、クローズ ボックスが表示されないという問題が回避されます。Tony の関数は負の値になる可能性があります。負の値になる良い例は、中央に大きなダイアログがあるが、エンド ユーザーが複数のツールバーをインストールしたり、既定のフォントを増やしたりした場合です。このような場合、モーダル ダイアログのクローズ ボックス (上部) が表示されず、クリックできない場合があります。
もう 1 つは、余分な DOM トラバーサルを減らすために $(window) オブジェクトをキャッシュすることでこれを少し高速化し、クラスター CSS を使用することです。
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
'position':'absolute',
'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
使用するには、次のようにします。
jQuery(document).ready(function($){
$('#myelem').center();
});
于 2012-04-23T06:32:36.000 に答える
9
一つ問題を修正したいと思います。
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
上記のコードは、this.height(ユーザーが画面のサイズを変更し、コンテンツが動的であると仮定します) および の場合には機能しませんscrollTop() = 0。例:
window.heightです600
this.height_650
600 - 650 = -50
-50 / 2 = -25
これで、ボックスが画面外の中央に配置され-25ました。
于 2011-03-08T18:27:11.470 に答える
7
これはテストされていませんが、このようなものは機能するはずです。
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
于 2008-10-17T03:45:39.163 に答える
6
要素を常にページの中央に配置したい場合、絶対位置を持つことが最善だとは思いません。おそらく固定要素が必要です。固定位置を使用する別の jquery センタリング プラグインを見つけました。固定中心といいます。
于 2010-07-03T09:25:23.600 に答える
5
編集：
質問が私に何かを教えてくれたとしたら、それはこれです：すでに機能しているものを変更しないでください:)
これがhttp://www.jakpsatweb.cz/css/css-vertical-center-solution.htmlでどのように処理されたかの (ほぼ) 逐語的なコピーを提供しています。質問に答える：
.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper {#position:absolute; #top:50%;
display:table-cell; vertical-align:middle;}
.content {#position:relative; #top:-50%;
margin:0 auto; width:200px; border:1px solid orange;}
フィドル: http://jsfiddle.net/S9upd/4/
これをブラウザショットで実行しましたが、問題ないようです。他に何もない場合は、CSS 仕様で規定されているマージン パーセンテージの処理が日の目を見るように、オリジナルを以下に保持します。
オリジナル：
私はパーティーに遅れたようだ ！
これが CSS の問題であることを示唆する上記のコメントがいくつかあります - 懸念事項の分離とすべて。これを前置きして、CSSは実際にこれに足を踏み入れたと言っておきましょう。つまり、これを行うのはどれほど簡単でしょうか。
.container {
position:absolute;
left: 50%;
top: 50%;
overflow:visible;
}
.content {
position:relative;
margin:-50% 50% 50% -50%;
}
右？コンテナの左上隅は画面の中央にあり、負のマージンを使用すると、コンテンツは魔法のようにページの絶対中央に再表示されます! http://jsfiddle.net/rJPPc/
違う！横位置はOKだけど、縦位置は……なるほど。どうやらcssでは、上マージンを%で設定すると、値は常に包含ブロックの幅に対するパーセンテージとして計算されます。リンゴとオレンジみたい！私や Mozilla doco を信用できない場合は、上記のフィドルでコンテンツの幅を調整してみてください。
CSS が私のパンとバターである今、私はあきらめようとしていませんでした。同時に、私は物事を簡単にすることを好むので、チェコの CSS グルの発見を借りて、実用的なフィドルにしました。簡単に言うと、vertical-align が middle に設定されたテーブルを作成します。
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
そして、コンテンツの位置は古き良きmargin:0 auto;で微調整されます。:
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
約束どおりの作業フィドル: http://jsfiddle.net/teDQ2/
于 2012-03-18T13:06:32.517 に答える
4
この関数の遷移コンポーネントは、Chromeではうまく機能しませんでした（他の場所ではテストしていません）。私はウィンドウのサイズを一気に変更し、私の要素は追いつくためにゆっくりとすくい回っていました。
したがって、次の関数はその部分をコメントします。さらに、水平方向ではなく垂直方向に中央揃えにする場合に、オプションのxおよびyブール値を渡すためのパラメーターを追加しました。例：
// Center an element on the screen
(function($){
$.fn.extend({
center: function (x,y) {
// var options = $.extend({transition:300, minX:0, minY:0}, options);
return this.each(function() {
if (x == undefined) {
x = true;
}
if (y == undefined) {
y = true;
}
var $this = $(this);
var $window = $(window);
$this.css({
position: "absolute",
});
if (x) {
var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
$this.css('left',left)
}
if (!y == false) {
var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();
$this.css('top',top);
}
// $(this).animate({
// top: (top > options.minY ? top : options.minY)+'px',
// left: (left > options.minX ? left : options.minX)+'px'
// }, options.transition);
return $(this);
});
}
});
})(jQuery);
于 2010-03-31T12:41:22.003 に答える
4
ブラウザー ビューポート (ウィンドウ) を基準にして要素を中央に配置するには、 を使用しないでくださいposition: absolute。正しい位置の値はfixed(絶対的な意味: 「要素は、最初に配置された (静的ではない) 先祖要素を基準にして配置されます」) である必要があります。
提案された中央プラグインのこの代替バージョンは、「px」の代わりに「%」を使用するため、ウィンドウのサイズを変更すると、コンテンツは中央に保持されます。
$.fn.center = function () {
var heightRatio = ($(window).height() != 0)
? this.outerHeight() / $(window).height() : 1;
var widthRatio = ($(window).width() != 0)
? this.outerWidth() / $(window).width() : 1;
this.css({
position: 'fixed',
margin: 0,
top: (50*(1-heightRatio)) + "%",
left: (50*(1-widthRatio)) + "%"
});
return this;
}
margin: 0コンテンツの余白を幅/高さから除外する必要があります(位置固定を使用しているため、余白は意味がありません)。jQuery doc using によると、.outerWidth(true)マージンを含める必要がありますが、Chrome で試したときに期待どおりに機能しませんでした。
50*(1-ratio)から来ます：
ウィンドウの幅:W = 100%
要素の幅 (%):w = 100 * elementWidthInPixels/windowWidthInPixels
それらは中央左を計算します：
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
于 2012-06-06T16:57:17.947 に答える
4
これは素晴らしい。コールバック関数を追加しました
center: function (options, callback) {
if (options.transition > 0) {
$(this).animate(props, options.transition, callback);
} else {
$(this).css(props);
if (typeof callback == 'function') { // make sure the callback is a function
callback.call(this); // brings the scope to the callback
}
}
于 2011-04-20T18:21:33.057 に答える
3
ここにあるのは、中央に配置しようとしている要素が「固定」または「絶対」の位置にあるだけでなく、中央に配置している要素がその親よりも小さいことを保証する「中央」メソッドです。要素が親である場合、要素の親が要素自体よりも小さい場合、DOM を次の親に略奪し、それを基準にして中央に配置します。
$.fn.center = function () {
/// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>
var element = $(this),
elementPos = element.css('position'),
elementParent = $(element.parent()),
elementWidth = element.outerWidth(),
parentWidth = elementParent.width();
if (parentWidth <= elementWidth) {
elementParent = $(elementParent.parent());
parentWidth = elementParent.width();
}
if (elementPos === "absolute" || elementPos === "fixed") {
element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
}
};
于 2013-08-14T13:09:19.497 に答える
2
これを使用してください：
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
于 2016-03-19T21:00:30.620 に答える
0
これにはjqueryは必要ありません
これを使用して Div 要素を中央に配置しました。CSS スタイル、
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
要素を開く
$(document).ready(function(){
$(".open").click(function(e){
$(".black_overlay").fadeIn(200);
});
});
于 2013-10-17T10:21:24.507 に答える
0
これが私のバージョンです。これらの例を見てから変更するかもしれません。
$.fn.pixels = function(property){
return parseInt(this.css(property));
};
$.fn.center = function(){
var w = $($w);
return this.each(function(){
$(this).css("position","absolute");
$(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
$(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
});
};
于 2012-06-04T04:28:22.033 に答える
0
ドキュメントがスクロールされるたびに要素の位置を調整しているため、移行がうまくいきません。あなたが望むのは、固定位置を使用することです。上記の固定センター プラグインを試してみたところ、問題はうまく解決したようです。固定配置を使用すると、要素を一度中央に配置できます。スクロールするたびに、CSS プロパティがその位置を維持します。
于 2010-07-07T18:17:19.670 に答える
0
これを行う方法はたくさんあります。BODY タグのすぐ内側にdisplay:noneを指定してオブジェクトを非表示にしておくと、位置が BODY に対して相対的になります。$("#object_id").show()を使用した後、 $( "#object_id").center()を呼び出します
私がposition:absoluteを使用するのは、特に小さなモバイル デバイスでは、モーダル ウィンドウがデバイス ウィンドウよりも大きくなる可能性があるためです。
他の人の回答と私の特定のニーズに基づく私の好みは次のとおりです。
$.fn.center = function () {
this.css("position","absolute");
//use % so that modal window will adjust with browser resizing
this.css("top","50%");
this.css("left","50%");
//use negative margin to center
this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");
//catch cases where object would be offscreen
if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});
return this;
};
于 2015-09-30T23:15:55.200 に答える
0
通常、私はこれを CSS のみで行います... しかし、jQuery でこれを行う方法を尋ねられたので...
次のコードは、コンテナ内で div を水平方向と垂直方向の両方で中央揃えにします。
$("#target").addClass("centered-content")
.wrap("<div class='center-outer-container'></div>")
.wrap("<div class='center-inner-container'></div>");body {
margin : 0;
background: #ccc;
}
.center-outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
}
.center-inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>（この Fiddleも参照）
于 2016-03-16T16:27:02.460 に答える
0
CSStranslateプロパティを使用できます。
position: absolute;
transform: translate(-50%, -50%);
詳細については、この投稿をお読みください。
于 2014-07-30T15:46:47.650 に答える
-7
div のセンタリングに CSS を使用しないのはなぜですか?
#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
于 2011-05-30T11:35:58.493 に答える