以100％寬度爲中心的CSS集中

我試圖集中頁面的所有內容，以便在調整瀏覽器的大小時，內容隨着調整而移動。我使用的CSS代碼：以100％寬度爲中心的CSS集中

margin: 0px auto; 
width: 670px;

不過，我想一個彩色頭覆蓋寬度的100％，而標題中的文本與頁面的其餘部分調整。我如何同時做這兩件事？

來源

2010-12-18 Justin Meltzer

這樣的事情，當然你應該使用完整的規範的HTML和鏈接的CSS樣式表...

<html> 
<head> 
</head> 
<body> 
<div style="height:120px; background-color:#FF0000;"> 
    <div style="background-color:#FFFF00; width:670px; margin:0 auto;"> 
     My page title 
    </div> 
</div> 
<div style="background-color:#00FFFF; width:670px; margin:0 auto;"> 
    My page content 
</div> 
</body> 
</html>

來源

2010-12-18 19:46:17

在margin屬性中使用的值之間不應該有逗號。相反，它應該顯示如下：

margin: 0px auto;

來源

2010-12-18 19:35:27

啊woops .......我在真正的代碼，這樣做，並沒有回答，雖然 – 2010-12-18 19:39:54

窩在容器內的段落中的文本是目前，該段的樣式設置爲你所需要的是，在設置容器的風格是100％的寬度。

來源

2010-12-18 19:36:35

使用margin-left:20%; margin-right:20% 這應該居中您的內容。

如果你想要一個現成的解決方案。看看Matthew taylor's Layouts

來源

2010-12-18 19:41:43 Omkar

您需要嵌套一些div ...

body{ 
margin: 0px; 
text-align: center; 
} 

div#container{ 
text-align: left; 
background-color: #ffffff; 
width: 670px; 
margin: 0px auto; 
}

這應該中心你的div＃容器，你可以把你的內容在該容器內。

編輯：上面只會居中您的頁面容器。我錯過了標題部分。這裏是......

body{ 
margin: 0px; 
text-align: center; 
} 

div#header-container{ 
height: 200px; 
background-color: #999999; 
} 

div#header{ 
text-align: left; 
background-color: #999999; 
width: 670px; 
height: 200px; 
margin: 0px auto; 
} 

div#content{ 
text-align: left; 
background-color: #ffffff; 
width: 670px; 
margin: 0px auto; 
} 


<html> 
<body> 
<div id="header-container"> 
    <div id="header">Page Title and the such...</div> 
</div> 
<div id="content"> 
Some Page Content 
</div> 
</body> 
</html>

來源

2010-12-18 19:53:35 csi

這裏是綿延屏幕的全寬頭一個頁面的例子，但有被限制在670px區域中的內容。

http://jsfiddle.net/CaUD3/

希望得到您開始。

鮑勃

來源

2010-12-18 19:54:00 rcravens

此，如果你在下面縮小您670px寬視破壞的問題。 – 2012-09-14 10:00:40

以100％寬度爲中心的CSS集中

回答

相關問題