Centrar elemento verticalmente

[MadDunDee]

Hola, estoy intentando centrar un elemento H3 verticalmente en su contenedor padre que es un div. Para ello estoy trabajando este código:

Código PHP:

  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!!

[killerangel]

por q no te evitas problemas y trabajas con tablas y su "valign" ????

[MadDunDee]

Lo siento Killer, pero eso sí que sería un problema. Trato de trabajar del modo más semantico posible y desde luego trabajar con tablas en este contexto no lo es. Las tablas para su cometido.

Además, a través de CSS es posible hacer comportarse al elemento padre como si fuera una tabla, pero tampoco me sirve por una cuestión de posicionamiento de los elementos. De modo que necesito realizar esto a través de jquery. Pero no consigo encontrar una función que lo realice correctamente.

Seguro que alguien ha utilizado algo similar antes, no??

[maycolalvarez]

el problema es que usas margin, lo ideal seria usar capas relativas o absolutas.

cuando aplicas margin a diversos objetos en un contenedor suelen solaparse los margenes superiores e inferiores adyacentes, para obtener el mismo margen y así tener elementos con el mismo espaciado, esto no ocurre en el caso del relleno o padding.

ejemplo padding vs margin:

fuente: http://librosweb.es/css/capitulo4/margen_y_relleno.html

[MadDunDee]

Hola mayco,

si funcionar funciona tal cual, de hecho el primer elemento h3 contenido en el primer div se centra correctamente en función de su height, pero el resto ya no.

Tengo la siguiente estructura en HTML:

Código PHP:

  <li class="work-item graphic "> 
                        <figure><a href="#" title="SEO KEYWORDS"><img src="images/samples/work-01.jpg" width="160" height="160" alt="Banner for CSNYC" /></a></figure> 
                        <div class="work-caption"> 
                            <h3><a class="caption-title zoom" href="images/samples/works-big/illustrativelettering_880.png" rel="graphic-gallery" title="Work for NY">Banner illustration for Crative Studios NYC</a></h3> 
                        </div> 
                    </li>  
   

Y lo siguiente en jquery:

Código PHP:

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

Con esta función, como digo, consigo centrar solo el primero de los h3 y necesito que lo haga en todos, tengo uno por cada trabajo en el portfolio. Unos 45-50 items, entonces mi duda es acerca de la función de jquery.

Cómo puedo matizarla para que se aplique a todos.

Muchas gracias de todos modos!! :)

[tredio]

podrías ahorrarte código trabajando solo con css, el código que te pongo abajo es para alinear un elemento verticalmente.

Código CSS:

.contentHeader{font:12px Verdana; height:30px; line-height:30px; border:solid 1px #000; vertical-align:middle;}//el borde es para que veas que si se alinea verticalmente.
 

Código HTML:

<div class="contentHeader">
    <h3>Título</h3>
</div>
 

[MadDunDee]

Lo siento mucho, pero este método no sirve para contenido dinámico. Ten en cuenta que cada uno de esos h3 van a tener un height diferente dependiendo de su contenido. Unas veces tendrá una línea, otras dos, tres...con lo cual un alto (height) diferente.

No consigo cerrar este asunto y me urge mucho, nadie conoce un método que funcione?

El código que estoy usando estoy casi seguro que funcionaría si la sintaxis fuera correcta, creo que está cerca. Si alguien pudiera echarle un vistazo lo agradecería mucho!

Gracias!

[tredio]

ok le heche un ojo a tu codigo, intenta asi:

Código CSS:

<style>
    .work-caption{font:12px Verdana; vertical-align:middle;}
    .work-caption h3{margin:0; padding:0;}
</style>
 

Código Javascript:

<script>
$(document).ready(function(){
    $(".work-caption").each(function(){
        var heigth = $(this).height();
        $(this).css({heith:height, lineHeigth:height;});
    });
});
</script>
 

no estoy seguro si funcione asi como esta por que no se como tienes estructurado tu css, pero pienso que es mas facil si lo haces usando line-heigth y vertical-align. saludos.

[MadDunDee]

Hola trejido. Muchas gracias por tu respuesta, pero ya conseguí solucionarlo con estas correcciones sobre el código original de jQuery. El problema estaba en que en lugar de tomar los divs padres tomaba los elementos h3 directamente. De esta form sí funciona, espero que le sirva al alguien:

Código PHP:

                  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').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); 
            } 
        });