Allineamento verticale un div posizionato in modo assoluto all'interno di un div contenente

Question

Uso il plug-in jQuery Cycle per ruotare le immagini in modalità presentazione. Funziona bene Il problema che sto avendo è ottenere queste immagini (di dimensioni diverse) al centro nel div contenente. Le immagini sono all'interno di un div slidshow che ha la sua posizione impostata in assoluto dal plugin Cycle.

Ho provato a impostare line-height/vertical-align e whatnot ma no dice. Ecco il relativo codice HTML e CSS

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

E nel caso in cui si vuole vedere, la 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" 
}); 

Tutte le idee su come ottenere queste immagini al centro?

Answer 1

Le posizioni sono relative in base al foglio di stile, quindi hai provato a impostarle su display: block e margin-top: auto; margin-bottom: auto;?

Un'altra opzione è quella di allinearli manualmente in javascript in base all'altezza del div contenitore.

Answer 2

Prova questa:

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

centratura verticale è un dolore! Ecco ciò che la pagina del W3C dice a proposito del centro verticale:

CSS di livello 2 non ha una proprietà per centrare le cose in senso verticale. Il numero sarà probabilmente uno nel livello 3 di CSS. Ma anche nei CSS2 è possibile centrare i blocchi verticalmente, combinando alcune proprietà . Il trucco è specificare che il blocco esterno sia formattato come cella di tabella, perché il contenuto di di una cella di tabella può essere centrato verticalmente su .

Answer 3

Questo metodo comporta un po 'di jQuery, ma funziona fantastico nella maggior parte delle situazioni ... Mi spiego:

se tutte le immagini della presentazione sono contenuti all'interno del proprio elemento div pos: assoluto e quelli le immagini sono pos: relative, quindi su $ (window) .load() puoi eseguire un .each() e trovare ogni img nella presentazione e regolare il suo posizionamento superiore per compensare un certo numero di pixel dall'alto ..

jcycle imposta automaticamente ciascun div principale contenente l'immagine a pos: assoluto su ogni onafter() quindi è inutile applicare questa regolazione pos a loro. .. invece indirizzare ogni img è stato impostato per pos: relativi ...

Ecco l'esempio:

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

    }); 

}); 

e questo è il codice html che sta lavorando su ...

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

basta assicurarsi

.slideImg { 
    position:relative; 
} 

penso che è tutto quello che ... Ho un esempio, ma è su un sito dev .. quindi questo link potrebbe non durare .. ma si può prendere un guardate qui: http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

È necessario annidare due div all'interno di ciascun articolo del ciclo. Il primo deve avere il display: inline-table; e il secondo deve avere display: table-cell; entrambi questi div hanno allineamento verticale: medio.

Quindi la struttura sarebbe simile a questa:

<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 il seguente CSS:

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

Potete vederlo lavorare qui http://jsfiddle.net/alsweeet/H9ZSf/6/