中心绝对定位的盒子?

时间:2013-04-04 12:26:53

标签: html css css3 alignment

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

4 个答案:

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

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

<强> Working Fiddle