我用jquery制作了一个简单的幻灯片,现在我遇到的问题是我无法将幻灯片放在div框的中心,这个名字是fadein:
<style>
body, html { margin:0; padding:0; width:100%; height:100%; }
.fadein { position:relative; width:auto; height:100%; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut().next('img')
.fadeIn().end()
.appendTo('.fadein');
}, 3000);
});
</script>
</head>
<body>
<div class="fadein">
<img src="1.png" width="auto" height="100%">
<img src="2.png" width="auto" height="100%">
<img src="3.png" width="auto" height="100%">
<img src="4.png" width="auto" height="100%">
<img src="5.png" width="auto" height="100%">
<img src="6.png" width="auto" height="100%">
<img src="7.png" width="auto" height="100%">
<img src="8.png" width="auto" height="100%">
</div>
</body>
我知道我不能简单地介绍的问题是它的位置是相对的,而且img absolut的位置!不知何故,有人知道如何使它工作!感谢
答案 0 :(得分:4)
添加left:0; right:0
(这将删除绝对定位div的默认值),然后margin:0 auto
将其置于中心。
.fadein img { position:absolute; left:0; right:0; top:0; margin:0 auto}
<强> DEMO 强>
答案 1 :(得分:0)
您可以尝试删除图片上的绝对定位,并将text-align:center
添加到其父.fadein
。
保持盒子模型尽可能简单通常是一个好主意。
答案 2 :(得分:0)
您不能将没有宽度设置的块元素居中。在.fadein上设置像素或百分比宽度。
宽度像素宽度:
.fadein {
position: relative;
width: 500px; /* or using percentage: 50% */
margin: 0 auto;
}
答案 3 :(得分:0)
与@Rodik建议的相同,增加了一些点。
.fadein {
/* dont give height:100% here */
text-align:center;
}
.fadein img {
height: 100%; /* don't give in html code */
}
height: auto
而不是height: 100%
提供给.fadein
,因为图片来自父元素。 (或者不提任何东西,因为它是默认的)。如果您想获得定位,那么@ Sowmya的解决方案肯定适合您。
<强> Working Fiddle 强>