Centrar elemento verticalmente
Hola, estoy intentando centrar un elemento H3 verticalmente en su contenedor padre que es un div. Para ello estoy trabajando este código:
var wrapper = $(".work-caption");
var theItem =$(".work-caption h3");
var contHeight=$(wrapper).height();
var contMiddle=contHeight/2;
var titleMiddle=$(".work-caption h3").height()/2;
var theMiddle=contMiddle-titleMiddle;
$(".work-caption h3").each(function(){
if(contHeight>$(this).height()){ //vertical
$(this).css('margin-top',theMiddle);
} else {
$(this).css('margin-top','0');
}
});
alert(contHeight);
alert(contMiddle);
alert(theMiddle);
El caso es que así solo consigo centrar verticalmente el primero. Pero no el resto, alguien podría decirme cómo hacer para que recoja el tamaño de todos los h3 y me los centre todos, no solo el primero?
Muchas gracias!!
maddundee
GRAAANDE Tiendy! Esa corrección funciona genial!
Muchas gracias!! ;)
tiendy
Hola!,
Creo que el problema es que el each tiene que recorrer los elementos ".work-caption" en vez de los h3.
Mira a ver si te vale esté código:
$('.work-caption').each(function(i) {var wh = $(this).height();
var ih = $('h3', this).height();
if (wh > ih) {
$('h3', this).css('margin-top', (wh-ih)/2 + 'px');
} else {
$('h3', this).css('margin-top',0);
}
});
Saludos