Centrar texto verticalmente con JQuery
Otra solución para centrar verticalmente un texto, sea dinámico o estático. Esta vez, usando JQuery como atajo para la solución. Este plugin de JQuery te permitirá reutilizarlo por toda tu web, llamado una simple función. Ahí va el código!
Plugin para alinear verticalmente con JQuery
Simplemente copia este código en tu web (si no sabes donde, simplemente deja un mensaje):
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css('margin-top', mh);
});
};
})(jQuery);Ahora, podés usar VAlign como más te guste, por ejemplo: $('#ejemplo p').vAlign();.
Acá lo que estarías centrando es el 'p' dentro de la 'id ejemplo'.
Si no funciona
Si no funciona, puede ser porque el script le aplica un margen al elemento, lo que puede llegar a no funcionar en todas las situaciones. Prueba cambiando 'margin-top' por 'padding-top' y fijate si eso lo soluciona.
NOTA: para que ande necesitas definir el alto del elemento contendedor. ej:
Comentarios
Enviar un comentario nuevo