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

Posted 2023-03-05

【中文标题】垂直对齐包含 div 内的绝对定位 div

【英文标题】：Vertical aligning an absolute positioned div inside a containing div

【发布时间】：2010-12-12 04:30:56

【问题描述】：

我正在使用 jQuery Cycle 插件以幻灯片类型的方式旋转图像。这很好用。我遇到的问题是让这些图像（不同大小的）在包含的 div 中居中。图片位于幻灯片 div 中，其位置由 Cycle 插件设置为绝对位置。

我尝试过设置 line-height/vertical-align 之类的但没有骰子。这是相关的 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"
);

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

【参考方案1】：

试试这个：

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

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

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

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【讨论】：

水平居中，我可以。垂直居中不起作用。我希望这些图像垂直居中位于包含的 div 中。目前，我有一个漂亮的宝丽来容器来保存图像，但它们位于其顶部。不漂亮：/

【参考方案4】：

您需要在每个循环项内嵌套两个 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/