中心绝对放置的盒子？

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

来源

2013-04-04 Em Sta

删除'宽度= “自动”'从'img'标签，或所述图像将不会在IE显示。在没有它的情况下，图像在所有浏览器中均可正常显示，并具有正确的高宽比 – 2013-04-04 12:57:20

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

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

DEMO

来源

2013-04-04 12:29:27 Sowmya

+1尼斯解决方案！也可以使用相同的基本技巧将图像垂直居中。这个技巧在旧版本的IE（IE8及更早版本？）中似乎不起作用，即使在从图像标记中删除width =“auto”后也是如此。它在所有其他浏览器中运行良好。 – 2013-04-04 14:54:57

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

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

来源

2013-04-04 12:38:03 Rodik

这是[demo]（http://jsfiddle.net/vphRH/1/）你有什么想法？从我目前看到的情况来看，这种方法的缺点是垂直滚动条在下一张图像的淡入淡出和淡入淡出之间短暂变化。在本地Web服务器上独立运行相同的代码时，滚动条会短暂出现并消失。使用绝对定位时不会出现滚动条问题。避免使用这种方法需要一些额外的工作。 – 2013-04-04 14:51:17

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

宽度像素宽度：

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

来源

2013-04-04 12:40:03

同什么@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

来源

2013-04-04 12:48:16

这会在下一张图像的fadeOut和fadeIn之间产生垂直滚动条的瞬间闪烁。附注：您链接的演示试图使用本地图像文件。 – 2013-04-04 14:10:43

@MattCoughlin我看不到瞬间的闪光？ http://jsfiddle.net/ffM6d/7/。但我会记住你的建议。 :)（因为我还没有测试过）。 – 2013-04-04 14:15:44

原始jQuery代码中存在拼写错误（我在上面的问题中解决了这个错误）。试试这个[你的演示版本]（http://jsfiddle.net/ffM6d/8/），使用更新的jQuery代码。有显示问题，包括改变垂直滚动条（尝试查看它在一个非常宽的浏览器窗口，[独立]（http://jsfiddle.net/ffM6d/8/show））。另外，我认为其意图是让每张图片的高度填充整个页面高度，这就是为什么'.fadein'可能需要'height：100％'。 – 2013-04-04 14:36:44

中心绝对放置的盒子？

回答

相关问题