Verticale en alignant une absolue positionné div à l'intérieur d'un div contenant

Je suis en utilisant jQuery Cycle plugin pour faire pivoter les images dans un diaporama type de mode. Cela fonctionne bien. Le problème que je vais avoir est d'obtenir ces images (de différentes tailles) pour centrer la div contenant. Les images sont à l'intérieur d'un slidshow div qui a il est en position absolue par le Cycle plugin.

J'ai essayé de réglage de la hauteur de la ligne/vertical-align et autres joyeusetés, mais pas de dés. Voici les HTML et 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;
}

Et dans le cas où vous voulez le voir, le 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"
});

Des idées sur l'obtention de ces images au centre?

OriginalL'auteur Anon | 2009-11-02

1

Essayez ceci:

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

Centrage Vertical est une douleur! Voici ce que le W3C page dit sur le centre vertical:

CSS niveau 2 n'ont pas de propriété
pour le centrage des choses à la verticale. Il y
sera probablement l'un en CSS niveau 3.
Mais même dans CSS2 vous pouvez centre de blocs
verticalement, en combinant un peu de
les propriétés. L'astuce consiste à spécifier
que l'extérieur du bloc est
formaté comme une cellule de tableau, parce que le
le contenu d'une cellule de tableau peut être
centrée verticalement.

OriginalL'auteur tahdhaze09

Cette méthode implique un peu de jquery, mais travaille fantastique dans la plupart des situations...
laissez-moi vous expliquer:

si toutes les images du diaporama sont contenus dans leur propre élément div pos:absolu et ces images sont pos:relative, sur un $(window).load (), vous pouvez exécuter une .each() et de trouver les uns img dans le diaporama et de l'ajuster la position de décalage à un certain nombre de pixels à partir du haut..

jcycle définit automatiquement chaque parent div contenant l'image à pos:absolu sur tous les onafter() donc il est inutile d'appliquer ce pos adaptation à eux... au lieu de la cible de chaque img que vous avez défini pour pos:relatif...

Voici l'exemple:

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

  });

});

et c'est le html, il travaille sur...

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

assurez-vous juste

.slideImg {
    position:relative;
}

Je pense que c'est tout... j'ai un exemple, mais c'est sur un site dev.. si ce lien peut pas durer.. mais vous pouvez prendre un coup d'oeil ici:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

OriginalL'auteur Abbey

0

Les positions sont relatives selon la feuille de style, si vous l'avez essayer de mettre à display: block et margin-top: auto; margin-bottom: auto; ?

Une autre option est de les aligner manuellement en javascript basé sur le div contenant de la hauteur.

Horizontale de centrage, je peux le faire. C'est le centrage vertical qui ne fonctionne pas. Je veux que ces images s'asseoir centrée verticalement dans le div contenant. Pour le moment, j'ai une belle Polaroid à la recherche conteneur pour les images, mais ils s'assoient au dessus de lui. Pas assez :/

OriginalL'auteur Myles

Vous devez imbriquer deux divs à l'intérieur de chaque élément du cycle. La première doit avoir le display: inline-table; et la seconde doit avoir display: table-cell; ces deux divs ont vertical-align: middle.

Ainsi, la structure devrait ressembler à quelque chose comme ceci:

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

Avec le code css suivant:

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

Vous pouvez le constater ici http://jsfiddle.net/alsweeet/H9ZSf/6/

OriginalL'auteur alsweet

Vous devez vous connecter pour publier un commentaire.