Vertikales Ausrichten eines absolut positionierten Divs innerhalb eines Containers div

Question

Ich verwende das jQuery Cycle-Plugin, um Bilder in einer Art Diashow zu drehen. Das funktioniert gut. Das Problem, das ich habe, ist diese Bilder (von verschiedenen Größen) zu zentrieren in der enthaltenen Div. Die Bilder befinden sich in einem Slidshow-Div, dessen Position durch das Cycle-Plugin auf absolut festgelegt wurde.

Ich habe versucht, Zeile-Höhe/vertikal-Ausrichtung und whatnot, aber keine Würfel. Hier ist der relevante HTML und 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; 
} 

Und falls Sie es sehen, die 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" 
}); 

Irgendwelche Ideen um diese Bilder zu zentrieren?

Answer 1

Die Positionen sind relativ zum Stylesheet, also haben Sie versucht, sie auf display: block und margin-top: auto; margin-bottom: auto; zu setzen?

Eine andere Option ist, sie manuell in Javascript basierend auf der Höhe des enthaltenden DIVs auszurichten.

Answer 2

Versuchen Sie folgendes:

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

Vertikale Zentrierung ist ein Schmerz! Was die W3C-Seite über die vertikale Mitte sagt:

CSS-Ebene 2 hat keine Eigenschaft zum Zentrieren von Dingen vertikal. Dort wird wahrscheinlich eins in CSS Level 3 sein. Aber auch in CSS2 können Sie die Blöcke vertikal zentrieren, indem Sie ein paar Eigenschaften kombinieren. Der Trick besteht darin, anzugeben, dass der äußere Block formatiert als eine Tabellenzelle sein soll, da der Inhalt einer Tabellenzelle vertikal zentriert sein kann.

Answer 3

Bei dieser Methode wird ein wenig jquery, arbeitet aber in den meisten Situationen fantastisch ... lassen Sie mich erklären:

, wenn alle Bilder der Diashow in ihrem eigenen Element div pos enthalten sind: absolute und diejenigen, Bilder sind pos: relativ, dann auf einem $ (window) .load() können Sie ein .each() ausführen und jedes img in der Slideshow finden und seine obere Positionierung anpassen, um eine bestimmte Anzahl von Pixeln von oben zu versetzen.

jcycle stellt automatisch jedes Elternteil, das das Bild enthält, auf pos: absolute auf jedes onafer() ein, so dass es sinnlos ist, diese Pos-Anpassung auf sie anzuwenden. .. stattdessen Ziel jeder img Sie pos gesetzt haben: relative ...

Hier ist das Beispiel:

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

    }); 

}); 

und dies ist der html es funktioniert auf ...

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

nur sicherstellen,

.slideImg { 
    position:relative; 
} 

Ich denke, dass alles ist ... ich ein Beispiel, aber es ist auf einer Entwickler-Website .. so Link .. nicht dauern könnte, aber man kann eine nehmen schau es dir hier an: http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

Sie müssen zwei Divs in jedem Zyklus Element verschachteln. Der erste muss die Anzeige haben: Inline-Tabelle; und der zweite muss display: table-cell; Beide Divs haben eine vertikale Ausrichtung: Mitte.

So würde die Struktur wie folgt aussehen:

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

Mit dem folgenden CSS:

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

Sie können es sehen, hier zu arbeiten http://jsfiddle.net/alsweeet/H9ZSf/6/