在绝对 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>

我还设置了一个代码笔：https://codepen.io/upplepop/pen/jmoMmQ

有两种方法可以做到这一点：

1( 设置父绝对值的宽度，并使用margin: auto;和display: 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%;
}
img{
  position: relative;
  margin: auto;
  display: 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>

2( 为绝对父项设置宽度，并对图像使用绝对定位和变换。

$("#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%;
}
img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

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

您还可以将text-align: center;添加到您的div 中。并将图像设置为display: inline;或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>

相关内容

最新更新

热门标签：