垂直对齐包含div中的绝对定位div

Question

我正在使用jQuery Cycle插件以幻灯片方式旋转图像.这很好.我遇到的问题是将这些图像(不同大小)放在包含div的中心.这些图像位于一个slidshow 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;？

另一种选择是根据包含的 div 的高度在 javascript 中手动对齐它们。