jqueryのを使用してdiv要素内の垂直方向の整列のdiv?
-
12-09-2019 - |
質問
誰もがjqueryのvAlighのプラグインまたは類似?
の経験を持っています誰もがそれは本当に参考になることができます場合、私は、(私は、最後にそのA jqueryの拡張子をプラグインを入れます)簡単なVALIGNプラグインを使用していた..私は次のために整列するために試みたが、それが失敗しました...
var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay');
$('body').append(overlayLayer);
$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);
this.render({ to: "content-for-overlay", partial: "office-location-modal" }); // this just copies html into the layer
$('#content-for-overlay').vAlign(); THIS USES a plugin called valign but it doesn't align
$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);
FN拡張子相続人..
(function($) {
$.fn.vAlign = function() {
return this.each(function(i) {
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQueryの)
解決
あなたは<のhref =「http://www.vdotmedia.com/blog/vertically-center-content-with-css/」のrel =「noreferrer」を示すように、垂直方向に中央の項目にCSSの技術を使用して試みることができます>ここを。 私は残念ながら、それはあなたのマークアップに余分なdiv要素を追加しても方法は、クロスブラウザであると考えています。
これは$().css()
を使用して、jQueryのを使用してマークアップには、このCSSを適用するのは非常に簡単になるだろう。
所属していません StackOverflow