垂直对齐包含div内的绝对定位div
我正在使用jQuery Cycle插件以幻灯片的方式旋转图像。这很好用。我遇到的问题是让这些(不同大小的)图像在包含的div中居中。图片位于一个幻灯片显示div中，该div的位置被Cycle插件设置为绝对。
我已经尝试设置行高/垂直对齐等，但没有骰子。下面是相关的HTML和CSS
HTML：
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</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
Stack Overflow用户
发布于 2009-11-03 02:40:48
试试这个：
http://www.brunildo.org/test/img_center.html
垂直居中是一种痛苦！下面是W3C页面对垂直中心的描述：
CSSLevel2没有垂直居中的属性。在CSS级别3中可能会有一个，但即使在CSS2中，你也可以通过组合几个属性来垂直居中。技巧是指定外部块将格式化为表格单元格，因为表格单元格的内容可以垂直居中。
Stack Overflow用户
发布于 2012-07-07 05:46:21
这个方法涉及到一些jquery，但在大多数情况下都很有效……让我解释一下：
如果幻灯片的所有图像都包含在它们自己的元素div pos:absolute中，并且这些图像是pos:relative，那么在$(window).load()上，您可以运行.each()并找到幻灯片中的每个img，并将其顶部位置调整为从顶部偏移一定数量的像素。
jcycle会自动将每个包含图像的父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
Stack Overflow用户
发布于 2009-11-02 13:44:09
根据样式表，位置是相对的，所以您是否尝试将它们设置为display: block和margin-top: auto; margin-bottom: auto;？
另一种选择是在javascript中基于包含div的高度手动对齐它们。
https://stackoverflow.com/questions/1659578
复制相似问题
腾讯云开发者
