如何将一个div居中并使其围绕它内部的div扩展？

我有一个我想要居中的页面，背景和边框围绕整个内容。如何将一个div居中并使其围绕它内部的div扩展？

我做了一个div，并设置了背景颜色和我想要的边框设置。

问题是它里面有div浮动，背景没有围绕浮动div伸展。我能够完成这项工作的唯一方法就是设定位置：绝对。然后边界确实扩展了浮动div，但我无法使用普通的html/css来居中。

我发现了一个JavaScript hack使其成为中心，但它只在页面加载后居中且看起来很糟糕。

我相信有一种方法可以使容器扩展并仍然以它为中心，但我无法弄清楚。

这里是一个示例HTML页面，分享我的问题

<div style="background-color: Red; width: 980px; position: absolute;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
</div>

这里是使得它的工作的JavaScript（用了jQuery）

$(function() { 
     var winH = $(window).height(); 
     var winW = $(window).width(); 
     $("#container").css('left', winW/2 - $("#container").width()/2); 
    });

有一定是更好的方法。

谢谢

来源

2009-05-20 Sruly

使用auto为左，右margin居中的元素。

在浮动元素之后放置一个元素，并使用clear将它放在它们下面。由于它不是浮动的，它会影响外部div的大小。

<div style="margin: 0 auto; background-color: Red; width: 980px;" id="container"> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <div style="width: 400px; background-color: Black; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="width: 400px; background-color: Blue; float: left;"> 
     <br /> 
     <br /> 
    </div> 
    <div style="clear: both; height: 0; overflow: hidden;"></div> 
</div>

来源

2009-05-20 16:25:33 Guffa

谢谢。我觉得有一种方法，但我无法弄清楚。 – Sruly 2009-05-20 17:19:41

这是一个棘手的问题，但我在样式表中使用下面的代码;

<style>div.sentor {text-align: center; height: 100%;} div.child{margin-left: auto; margin-right: auto; width: 95%; height: 100%;}</style>

然后在体内;

<div class="sentor"> 
<div class="child"> 
    <div id="mycontent">

这应该做的伎俩

来源

2009-05-20 16:24:48 simon622

也许我不是很了解你的问题，但我认为你正在寻找类似的东西。下面是我们简单的布局：

<html> 
    <head> 
     ... 
    </head> 

    <body> 

     <div id="center"> 
      <!-- your content --> 
     </div> 

    </body> 

</html>

为了获得股利＃中心的内容移动到页面的中心，我们需要以下CSS：

body { 
    text-align: center; 
} 

div#center { 
    text-align: left; 
    width: 600px; // Or some other arbitrary width 
    margin: 0 auto; 
}

这将围绕身体内的一切。但是，text-align：center;财产也将适用于身体的孩子，所以我们用第二种规则取消。另外，在地方DIV＃中心，你可以使用下面的风格规则：

body * { 
    text-align: left; 
}

来源

2009-05-20 16:31:45

这使用Internet Explorer中的错误。它在任何其他浏览器中都不起作用，因为它们遵循标准并且不应用文本对齐来阻止元素。 – Guffa 2009-05-20 18:25:41

用途：

<div style="margin:0 auto; overflow:hidden; background-color: Red; width: 980px; id="container">

保证金：0汽车;将以红色div为中心。

溢出：隐藏;将使红色div伸展包含两个浮动div。

来源

2009-05-20 21:24:34 Emily

如何将一个div居中并使其围绕它内部的div扩展？

回答

相关问题