如何將一個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擴展？

回答

相關問題