1

我用 jquery 制作了一个简单的幻灯片，现在我遇到的问题是我无法将 div 框居中，幻灯片的名称是淡入淡出：

<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 的位置是绝对的！不知怎的，有人知道如何让它工作！谢谢

4

4 回答 4

4

添加left:0; right:0（这将删除绝对定位 div 的默认值），然后margin:0 auto将其带到中心。

.fadein img { position:absolute; left:0; right:0; top:0; margin:0 auto}

演示

于 2013-04-04T12:29:27.413 回答
0

您可以尝试删除图像上的绝对定位并添加text-align:center到它们的 parent .fadein。

保持盒子模型尽可能简单通常是个好主意。

于 2013-04-04T12:38:03.423 回答
0

您不能将没有设置宽度的块元素居中。在 .fadein 上设置像素或百分比宽度。

宽度像素宽度：

.fadein {
    position: relative;
    width: 500px; /* or using percentage: 50% */
    margin: 0 auto;
}
于 2013-04-04T12:40:03.760 回答
0

与@Rodik 建议的相同，增加了一些要点。

 .fadein {
      /* dont give height:100% here */
      text-align:center;
 }
 .fadein img {
     height: 100%;  /* don't give in html code */
 }
  • Giveheight: auto而不是height: 100%to，.fadein因为图像来自父元素。（或者不要提及任何东西，因为它是默认的）。
  • 从父元素和子元素中删除定位。
  • 将所有 CSS 样式保存在外部样式表中。
  • 尽量让你的代码尽可能简单。（来自@Rodik 的好建议）

如果你想有定位，那么@Sowmya 的解决方案肯定会为你工作。

工作小提琴

于 2013-04-04T12:48:16.290 回答