垂直对齐一个绝对定位的div内含div div

Question

我正在使用jQuery Cycle插件以幻灯片类型的方式旋转图像。这工作正常。我遇到的问题是获取这些（不同大小的）图像集中在包含div。这些图像位于一个slidingshow div中，它的位置由Cycle插件设置为绝对位置。

我试过设置行高/垂直对齐和不是骰子。下面是相关的HTML和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; 
} 

而如果你想看到它，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" 
}); 

任何想法让这些图像居中？

Answer 1

根据样式表的位置是相对的，所以你尝试将它们设置为display: block和margin-top: auto; margin-bottom: auto;？

另一种方法是在JavaScript中根据包含div的高度手动对齐它们。

Answer 2

试试这个：

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

垂直居中是一种痛苦！下面是W3C网页说，有关垂直中心内容：

CSS 2级不具有财产 为垂直居中的事情。有 可能会在CSS级别3中的一个。 但即使在CSS2中，您可以通过组合几个 属性来垂直居中块 。诀窍是指定 外部块的格式应为 ，因为表格单元的 内容可以是垂直居中的 。

Answer 3

这种方法是一点点的jQuery，但在大多数情况下工作太棒了...... 让我解释一下：

如果幻灯片中的所有影像都包含自己的元素DIV POS内：绝对和那些图像是pos：relative，然后在$（window）.load（）上运行.each（）并在幻灯片中查找每个img，并调整它的顶部定位以从顶部偏移一定数量的像素。

jcycle自动将每个包含图像的父div设置为pos：absolute on onafter（），所以将这个pos调整应用于它们是没用的。 ..而不是针对每一个的img已设置的POS：相对...

这里是例子：

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

    }); 

}); 

，这是它的工作的HTML ...

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

只是确保

.slideImg { 
    position:relative; 
} 

我认为这一切......我有一个例子，但它是一个开发站点..所以这个链接可能不会持续..但是你可以去请看这里： http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html

Answer 4

您需要在每个循环项目中嵌套两个div。第一个必须显示：inline-table;第二个必须有display：table-cell;这两个div都有vertical-align：middle。

所以结构会是这个样子：

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

用下面的CSS：

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

你可以看到它在这里工作http://jsfiddle.net/alsweeet/H9ZSf/6/