5

我正在使用 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"
});

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

4

4 回答 4

1

尝试这个：

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

垂直居中是一种痛苦！以下是 W3C 页面关于垂直中心的说明：

CSS level 2 没有垂直居中的属性。CSS level 3 中可能会有一个。但即使在 CSS2 中，您也可以通过组合一些属性来垂直居中块。诀窍是指定将外部块格式化为表格单元格，因为表格单元格的内容可以垂直居中。

于 2009-11-02T18:40:48.343 回答
1

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

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

jcycle 会在每个 onafter() 上自动将包含图像的每个父 div 设置为 pos:absolute，因此对它们应用这种 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-editor.html

于 2012-07-06T21:46:20.500 回答
0

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

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

于 2009-11-02T05:44:09.283 回答
0

您需要在每个循环项目内嵌套两个 div。第一个必须有显示：inline-table；第二个必须有 display: table-cell; 这两个 div 都有垂直对齐：中间。

所以结构看起来像这样：

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

于 2013-04-30T17:55:29.193 回答