css - 垂直对齐包含 div 内的绝对定位的 div

Question

我正在使用 jQuery Cycle 插件以幻灯片形式旋转图像。那很好用。我遇到的问题是让这些图像(不同大小)在包含的 div 中居中。图像位于幻灯片显示 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

试试这个:

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

垂直居中很痛苦!以下是 W3C 页面关于垂直居中的内容:

CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.