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

试试这个：

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

垂直定心是一种痛苦！以下是W3C页面关于垂直中心的内容：

CSS级别2没有属性用于垂直居中那里可能是CSS 3级中的一个。但即使在CSS2中，你也可以使用中心块垂直，结合几个属性。诀窍是指定外部块是格式化为表格单元格，因为表格单元格的内容可以是垂直居中。

Answer 2

这种方法涉及一点点jquery，但在大多数情况下效果很好...... 让我解释一下：

如果幻灯片的所有图像都包含在他们自己的元素div pos：absolute中，那些图像是pos：relative，那么在$（window）.load（）上你可以运行.each（）并查找每个img在幻灯片中并调整它的顶部定位以从顶部偏移一定数量的像素..

jcycle会自动将包含图像的每个父div设置为pos：absolute on every onafter（）所以将这个pos调整应用于它们是没用的...而是将你设置的每个img定位到pos：relative ...

以下是示例：

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

根据样式表，这些职位是相对的，您是否尝试将其设置为display: block和margin-top: auto; margin-bottom: auto;？

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

Answer 4

您需要在每个循环项目中嵌套两个div。第一个必须有display：inline-table;第二个必须有显示：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/

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

4 个答案: