在div中使用jquery垂直对齐div？

任何人有jQuery vAligh插件或类似的经验吗？在div中使用jquery垂直对齐div？

我试图对齐以下，但它失败..我正在使用一个简单的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的）;

来源

2009-06-08 mark smith

谢谢大家，我终于选择了在最后，它不是没有错误以下但在评论更正，它在IE中的错误，但与更正其罚款...... http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin也许这将是某人用于其他人 – 2009-06-08 21:22:48

您可以尝试使用CSS技术垂直居中放置物品，如here所示。我相信这个方法是跨浏览器的，不过不幸的是它为你的标记增加了一个额外的div。

这将会是相当容易的应用此css来使用jQuery的标记，使用$().css()

来源

2009-06-08 18:04:59

http://stackoverflow.com/问题/ 967022/how-do-i-vertical-center-text-next-to-an-image-in-html-css也有相关的讨论。 – ajm 2009-06-08 21:14:39

在div中使用jquery垂直对齐div？

回答

相关问题