Html 中央绝对定位框？_Html_Css_Alignment

Html 中央绝对定位框？

html css

Html 中央绝对定位框？,html,css,alignment,Html,Css,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; } </st

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

添加左侧：0；右：0这将删除绝对定位div的默认值，然后使用margin:0自动将其移到中心

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

左加：0；右：0这将删除绝对定位div的默认值，然后使用margin:0自动将其移到中心

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

您可以尝试删除图像上的绝对位置，并将文本align:center添加到其父.fadein

通常情况下，最好使长方体模型尽可能简单。

您可以尝试删除图像上的绝对位置，并将文本align:center添加到其父对象。fadein

通常，保持长方体模型尽可能简单是一个好主意。

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

宽度像素宽度：

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

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

宽度像素宽度：

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

与@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的解决方案肯定会适合你

与@Rodik建议的相同，添加了更多点

 .fadein {
      /* dont give height:100% here */
      text-align:center;
 }
 .fadein img {
     height: 100%;  /* don't give in html code */
 }

从img标记中删除width=auto，否则图像将无法在IE中显示。如果没有它，图像在所有浏览器中以正确的纵横比显示良好。从img标记中删除width=auto，否则图像将无法在IE中显示。如果没有它，图像在所有浏览器中显示良好，具有正确的纵横比。这会在淡出和下一幅图像的淡出之间导致垂直滚动条瞬间闪烁。旁注：您链接到的演示正在尝试使用本地图像文件。@MattCoughlin我看不到瞬间闪光。但我会记住你的建议因为我从来没有测试过。我在上面的问题中修复了原始jQuery代码中的一个输入错误。请使用更新的jQuery代码尝试此操作。存在显示问题，包括更改垂直滚动条尝试在非常宽的浏览器窗口中查看。另外，我认为目的是让每个图像的高度填充整个页面高度，这就是为什么。fadein可能需要高度：100%。这会导致在下一个图像的fadeOut和fadein之间的垂直滚动条瞬间闪烁。旁注：您链接到的演示正在尝试使用本地图像文件。@MattCoughlin我看不到瞬间闪光。但我会记住你的建议因为我从来没有测试过。我在上面的问题中修复了原始jQuery代码中的一个输入错误。请使用更新的jQuery代码尝试此操作。存在显示问题，包括更改垂直滚动条尝试在非常宽的浏览器窗口中查看。另外，我认为目的是让每个图像的高度填满整个页面的高度，这就是为什么。fadein可能需要高度：100%。这是你的想法吗？从目前为止我所看到的情况来看，这种方法的缺点是垂直滚动条在下一幅图像的淡出和淡出之间会发生短暂的变化。在本地Web服务器上独立运行相同代码时，滚动条会短暂出现并消失。使用绝对定位时不会出现滚动条问题。用这种方法避免它需要一些额外的工作。这是你的想法吗？从目前为止我所看到的情况来看，这种方法的缺点是垂直滚动条在下一幅图像的淡出和淡出之间会发生短暂的变化。在本地Web服务器上独立运行相同代码时，滚动条会短暂出现并消失。使用绝对定位时不会出现滚动条问题。用这种方法避免它需要一些额外的工作。+1很好的解决方案！同样的基本技巧也可以用于垂直居中图像。这个技巧在旧版本的IE8和IE中似乎不起作用

更早？即使在从图像标记中删除width=auto之后。它在所有其他浏览器中运行良好。+1很好的解决方案！同样的基本技巧也可以用于垂直居中图像。即使从图像标签中删除了width=auto，这个技巧在IE IE8和更早版本中似乎也不起作用。它在所有其他浏览器中都运行良好。