在我正在创建的幻灯片(在最后一张幻灯片上停止)的 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
最佳答案
有两种方法:
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>关于html - 在绝对 div 中水平居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44222956/