2009-06-08 22 views
6

Alguien tiene alguna experiencia con jQuery plugins vAligh o similar?alineación vertical div dentro de un div usando jquery?

Intenté alinearme para lo siguiente pero falla ... Estaba usando un plugin de valign simple (pondré el plugin al final, es una extensión jquery), si alguien puede ayudar, sería realmente útil. .

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

heres la extensión 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);

+0

Gracias a todos, que finalmente optó por la siguiente, al final, no es sin errores, pero no hay correcciones en los comentarios, él los errores en IE pero con correcciones su fina ...... http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin tal vez será de someuse a otra persona –

Respuesta

6

Usted podría tratar de usar una técnica de CSS a los elementos verticalmente centro, como se muestra here. Creo que el método es de navegador cruzado, aunque desafortunadamente agrega un div adicional a su marcado.

que sería bastante fácil de aplicar este CSS para el marcado usando jQuery, utilizando $().css()

+1

http://stackoverflow.com/ questions/967022/how-do-i-vertical-center-text-next-to-an-image-in-html-css tiene una discusión que también es relevante. – ajm

Cuestiones relacionadas