[英]vertical align div within a div using jquery?
任何人有jquery vAligh插件或類似的經驗?
我嘗試調整以下但是它失敗了..我使用的是一個簡單的valign插件(我將插件放在最后,它是一個jquery擴展),如果有人可以幫助它會真的很有幫助...
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的);
你可以嘗試使用一個CSS技術中心垂直項目,如圖所示這里 。 我相信這種方法是跨瀏覽器的,但不幸的是它為你的標記添加了額外的div。
使用jQuery,使用$().css()
將此css應用於標記相當容易$().css()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.