Question

我难以在我正在制作的幻灯片中（在最终幻灯片上停止）的div内水平居中图像。我正在处理的部分是我的JS需要绝对定位来运行幻灯片放映，我一直在尝试的一切都不是使图像居中或导致幻灯片放映无法正常工作。这是我正在使用的代码：

<head>
<style>
#slideshow > div {
    position: absolute;
}
</style>
</head>

<body>
<div id="slideshow">
   <div>
     <img src="http://imagizer.imageshack.us/v2/499x469q90/538/Dn4xDQ.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/500x500q90/537/9WJ0XM.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/432x432q90/538/xlMaV6.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/640x473q90/912/LRvTD5.jpg">
   </div>   
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'>    
</script>
<script>
$("#slideshow > div:gt(0)").hide();
var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 3){
    clearInterval(interval);
}
$('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 3000);
</script>

</body>
</html>

我还设置了CodePen：https://codepen.io/upplepop/pen/jmoMmQ

Answer 1

有两种方法可以做到：

1）为父级设置宽度，并使用margin: auto;和display: block使图像居中

＆＃13;

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);

＆＃13;

#slideshow > div {
  position: absolute;
  width: 100%;
}

img{
  position: relative;
  margin: auto;
  display: block;
}

＆＃13;

<head>
</head>

<body>
<div id="slideshow">
   <div>
     <img src="http://imagizer.imageshack.us/v2/499x469q90/538/Dn4xDQ.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/500x500q90/537/9WJ0XM.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/432x432q90/538/xlMaV6.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/640x473q90/912/LRvTD5.jpg">
   </div>   
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

</body>

＆＃13;

2）设置绝对父级的宽度，并对图像使用绝对定位和变换。

＆＃13;

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);

＆＃13;

#slideshow > div {
  position: absolute;
  width: 100%;
}

img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

＆＃13;

<head>
</head>

<body>
<div id="slideshow">
   <div>
     <img src="http://imagizer.imageshack.us/v2/499x469q90/538/Dn4xDQ.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/500x500q90/537/9WJ0XM.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/432x432q90/538/xlMaV6.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/640x473q90/912/LRvTD5.jpg">
   </div>   
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

</body>

＆＃13;

Answer 2

You can also add text-align: center; to your div. And keep your images set to display: inline; or display: inline-block;

$("#slideshow > div:gt(0)").hide();


var timesRun = 0;
var interval = setInterval(function(){
	timesRun += 1;
	if(timesRun === 3){
	clearInterval(interval);
}
$('#slideshow > div:first')
	.fadeOut(800)
	.next()
	.fadeIn(800)
	.end()
	.appendTo('#slideshow');
}, 2000);

#slideshow > div {
  position: absolute;
  width: 100%;
  text-align: center;
}

img{
  position: relative;
  display: inline-block;
}

<head>
</head>

<body>
<div id="slideshow">
   <div>
     <img src="http://imagizer.imageshack.us/v2/499x469q90/538/Dn4xDQ.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/500x500q90/537/9WJ0XM.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/432x432q90/538/xlMaV6.jpg">
   </div>
   <div>
     <img src="http://imagizer.imageshack.us/v2/640x473q90/912/LRvTD5.jpg">
   </div>   
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

</body>

在绝对div中水平居中图像

2 个答案: