Question

我用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的位置！不知何故，有人知道如何使它工作！感谢

Answer 1

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

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

<强> DEMO

Answer 2

您可以尝试删除图片上的绝对定位，并将text-align:center添加到其父.fadein。

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

Answer 3

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

宽度像素宽度：

.fadein {
    position: relative;
    width: 500px; /* or using percentage: 50% */
    margin: 0 auto;
}

Answer 4

与@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，因为图片来自父元素。（或者不提任何东西，因为它是默认的）。
从父元素和子元素中删除定位。
将所有css样式保存在外部样式表中。
尽量保持代码尽可能简单。（来自@Rodik的好建议）

如果您想获得定位，那么@ Sowmya的解决方案肯定适合您。

<强> Working Fiddle

中心绝对定位的盒子？

4 个答案: