Question

我有一个自动播放幻灯片（由jQuery / JS控制），需要每个图像绝对定位。问题是我试图在我的页面上水平居中这个幻灯片，但我尝试的任何东西似乎都没有用。幻灯片放映不仅必须以全屏宽度为中心，而且还必须在调整浏览器大小时。

根据我的理解，绝对定位的任何东西都应该相对于下一个定位的祖先定位。在我的代码中，这个祖先碰巧是＆＃34; .fadein＆＃34; div（我认为？或者应该是＆＃34;＃幻灯片＆＃34; div？），这是相对定位的。因此，如果我定位这个＆＃34; .fadein＆＃34;从理论上讲，幻灯片应该在页面上移动。

这确实有效。我可以相对定位＆＃34; .fadein＆＃34;从左侧（或任何一侧）乘以100px（或其他），幻灯片也会移动。

但是我无法找到任何可靠的方法将幻灯片定位在我的页面的水平中心而不是：

1）造成额外的空白＆＃34;在图像的一侧，这会导致页面底部的滚动条无效。

2）在调整浏览器大小时阻止图像调整大小。

编辑1：我能够将幻灯片显示为中心，但无法找到让它重新调整大小的方法......

希望有人可以帮我解决这个问题。谢谢！

＆＃13;

			$(function() {

    $('.fadein img:gt(0)').hide();
    
    setInterval(function() {
    
    	$('.fadein :first-child').fadeOut(2000)
      
        	.next('img').fadeIn(2000)
         
        	.end().appendTo('.fadein');
         
    	}, 5000);
});

＆＃13;

.fadein {
	position:relative;
}

.fadein img{
	position:absolute;
	left:0;
}

＆＃13;

<div id="slideshow">

  <div class="fadein">
				
	  <img src="http://placehold.it/350x150" />
 	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
			
  </div>
			
</div>

＆＃13;

编辑2：我发现中心在Safari（Mac）中运行良好，但在Firefox（Mac）中效果不佳。为什么会这样？以下是我现在所做的（编辑了一点以适应我的页面流程，但我没有做任何会改变FF布局的内容。在FF中，幻灯片现在大约600px到右边，所以关闭在Safari中，它非常适合，无需任何滚动。

＆＃13;

.fadein {
	position:relative;
	top:70px;
	height:100%;
}

.fadein img {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%, -0%);
}

#slideshow {
	max-width:100%;
	height:100%;
}

＆＃13;

<div id="slideshow">

  <div class="fadein">
				
	  <img src="http://placehold.it/350x150" />
 	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
			
  </div>
			
</div>

＆＃13;

Answer 1

您实际上可以使用来自css的calc，例如：

.your-absolute-element {
  position: absolute;
  left: calc(50% - sizeOfElement);
}

这是一个选项，有很多方法可以使中心对齐居中的盒子。

Answer 2

$(function() {

    $('.fadein img:gt(0)').hide();
    
    setInterval(function() {
    
    	$('.fadein :first-child').fadeOut(2000)
      
        	.next('img').fadeIn(2000)
         
        	.end().appendTo('.fadein');
         
    	}, 5000);
});

body,html {
position:relative;
  height: 100%;
}

.fadein {
	position:relative;
  height: 100%;
}

.fadein img{
	position:absolute;
	left:50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}

#slideshow {
position:absolute;
  width: 100%;
  height: 100%;
}

<div id="slideshow">

  <div class="fadein">
				
	  <img src="http://placehold.it/350x150" />
 	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
	  <img src="http://placehold.it/350x150" />
			
  </div>
			
</div>

我的幻灯片不居中，无所谓我尝试

2 个答案: