Alineación vertical de un div posicionado en el interior de un div que contiene

Question

Estoy usando el complemento jQuery Cycle para rotar las imágenes en un tipo de presentación de diapositivas. Eso funciona bien El problema que tengo es conseguir que estas imágenes (de diferentes tamaños) se centren en el div que contiene. Las imágenes están dentro de un div deslizador que tiene su posición establecida en absoluta por el complemento Cycle.

He intentado configurar line-height/vertical-align y whatnot pero no hay dados. Aquí está el código HTML y CSS relevante

HTML:

<div id="projects"> 
    <div class="gallery"> 
    <span class="span1">&#9668;</span><span class="span2">&#9658;</span> 
     <div class="slideshow"> 
      <img src="images/img1.png" /> 
      <img src="images/img1.png" /> 
      <img src="images/img1.png" /> 
     </div> 
    </div> 
</div> 

CSS:

#main #home-column-2 #projects 
{ 
    width: 330px; 
    background: #fefff5; 
    height: 405px; 
    padding: 12px; 
} 

#main #home-column-2 #projects .gallery 
{ 
    width: 328px; 
    height: 363px; 
    position: relative; 
    background: url('images/bg-home-gallery.jpg'); 
} 

#main #home-column-2 #projects .gallery img 
{ 
    position: relative; 
    z-index: 10; 
} 

Y en caso de que quiera verlo, el jQuery:

$('#home-column-2 #projects .gallery .slideshow').cycle(
{ 
    fx: 'scrollHorz', 
    timeout: 0, 
    next: "#home-column-2 #projects .gallery span.span2", 
    prev: "#home-column-2 #projects .gallery span.span1" 
}); 

Todas las ideas en hacer que estas imágenes se centren?

Answer 1

Las posiciones son relativas de acuerdo con la hoja de estilo, por lo que intentó configurarlas en display: block y margin-top: auto; margin-bottom: auto;?

Otra opción es alinearlas manualmente en javascript en función de la altura del div que lo contiene.

Answer 2

Prueba esto:

http://www.brunildo.org/test/img_center.html

centrado vertical es un dolor! Esto es lo que dice la página del W3C sobre el centro vertical:

CSS nivel 2 no tiene una propiedad cosas para centrar verticalmente. No probablemente será uno en CSS nivel 3. Pero incluso en CSS2 puede centrar bloques verticalmente, mediante la combinación de unas pocas propiedades . El truco consiste en especificar que el bloque externo debe ser formateado como una celda de tabla, porque el contenido de una celda de tabla puede ser centrado verticalmente.

Answer 3

Este método implica un poco de jQuery, pero funciona de maravilla en la mayoría de las situaciones ... Me explico:

si todas las imágenes de la presentación de diapositivas están contenidos dentro de su propio elemento div pos: absoluta y aquellos las imágenes son pos: relativa, luego en $ (ventana) .load() puede ejecutar .each() y encontrar cada img en la presentación de diapositivas y ajustar su posición superior para compensar una cierta cantidad de píxeles desde la parte superior.

jcycle establece automáticamente cada div principal que contiene la imagen en pos: absoluto en cada onafter() por lo que es inútil aplicarles este ajuste de posición. .. en cambio apuntar cada IMG ha ajustado a Pos: relativos ...

Aquí está el ejemplo:

$(window).load(function() { 

    // move all slides to the middle of the slideshow stage 
    var slideshowHeight = 600; //this can dynamic or hard-coded 

    $('.slideImg').each(function(index) { 

    var thisHeight = $(this).innerHeight(); 
    var vertAdj = ((slideshowHeight - thisHeight)/2); 
    $(this).css('top', vertAdj); 

    }); 

}); 

y este es el HTML que está trabajando en ...

<div class="slideshow" style="position: relative; "> 

    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery --> 
    </div> 


    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery --> 
    </div> 


    <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2"> 
     <img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery --> 
    </div> 


</div> 

a asegurarnos de

.slideImg { 
    position:relative; 
} 

creo que eso es todo lo que ... Tengo un ejemplo, pero está en un sitio dev .. por lo que este vínculo podría no durar .. pero se puede tomar una mira aquí: http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

Necesitas nido dos divs dentro de cada elemento ciclo. El primero debe tener la pantalla: inline-table; y el segundo debe tener display: table-cell; ambos divs tienen vertical-align: middle.

Así que la estructura sería algo como esto:

<div class="slide-container"> 
    <div class="slide"> 
     <div class="outer-container"> 
      <div class="inner-container"> 
       Centered content 
      </div> 
     </div> 
    </div> 

    <div class="slide"> 
     <div class="outer-container"> 
      <div class="inner-container"> 
       Centered content 
      </div> 
     </div> 
    </div> 
</div> 

Con el siguiente CSS:

.slide-container { 
    height: 300px; 
} 
.outer-container { 
    height: 300px; 
    display: inline-table; 
    vertical-align: middle; 
} 
.inner-container{ 
    vertical-align: middle; 
    display: table-cell; 
} 

Se puede ver trabajando aquí http://jsfiddle.net/alsweeet/H9ZSf/6/