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

Question

我正在使用jQuery Cycle插件以幻灯片方式旋转图像。这很好运行。我遇到的问题是将这些大小不同的图像居中在包含div中。 图像位于具有由Cycle插件设置为absolute的位置的slidshow div内。

我已尝试设置行高/垂直对齐等，但无济于事。以下是相关的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"
});

有没有关于让这些图片居中的想法？

- Anon

Answer 1

这种方法涉及一点jquery，但在大多数情况下都非常出色... 让我解释一下：

如果幻灯片的所有图像都包含在它们自己的元素div pos:absolute中，并且这些图像是pos:relative，则在$(window).load()上您可以运行.each()并找到幻灯片中的每个img并调整其顶部定位以偏移一定数量的像素从顶部..

jcycle会自动将包含图像的每个父div设置为pos:absolute，在每次onafter()时都会这样做，因此对它们应用这个pos调整是无用的...而是针对每个pos:relative的img进行目标处理...

以下是示例：

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

- Abbey

Answer 2

试试这个：

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

垂直居中真是个烦人的问题！以下是W3C页面关于垂直居中的说法：

CSS2没有用于垂直居中的属性。CSS3可能会有一个。但即使在CSS2中，您也可以通过组合几个属性来垂直居中块。诀窍是指定外部块将被格式化为表格单元格，因为表格单元格的内容可以在垂直方向上居中。

- tahdhaze09

Answer 3

你需要在每个循环项内嵌套两个div。第一个必须具有display: 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/

- alsweet

Answer 4

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

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

- Myles

---

我可以实现水平居中，但垂直居中却无法正常工作。我想让这些图像在包含的div中垂直居中。目前，我有一个很漂亮的拍立得外观容器来容纳这些图像，但它们却位于顶部。不太美观:/ - Anon