2014-10-09 86 views
0

所以,我試圖將我的三個div分別放在頁面,#header,#nav和#headerImg上。我似乎無法使用margin:0 auto來居中我的#header和#nav div。雖然。刷新頁面時,它們似乎卡在頁面的左側。保證金0汽車將不會居中我的兩個divs

這是我爲我的網頁的style.css:

div#header{      //I only have one image here. 
 
\t position:absolute; 
 
\t padding: 10px 20px; 
 
\t width: 960px; 
 
\t height: 49px; 
 
\t top: 0px; 
 
\t background-color: #2E5E8D 
 
\t 
 
\t } 
 
div#nav{      //I have 4 links here 
 
\t position:absolute; 
 
\t margin: 0 auto; 
 
\t padding: 10px 20px; 
 
\t width: 960px; 
 
\t height: 20px; 
 
\t top: 69px; 
 
\t background-color: #2E5E8D 
 
\t \t } 
 
div#headerImg{     //I have one image here, 
 
\t position: relative; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
\t width: 1000px; 
 
\t top: 95px; 
 
\t 
 
\t } 
 
div#content{ 
 
\t position:relative; 
 
\t top:109px; 
 
\t width:1000px; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
\t } 
 
div#content a{ 
 
\t \t \t color: blue; 
 
\t \t \t text-decoration: none; 
 
\t \t \t } 
 
#content a:hover{ 
 
\t \t \t color: red; 
 
\t \t \t text-decoration: underline; 
 
\t \t \t } 
 
\t 
 
#content dt{ 
 
     margin-top: 10px; 
 
\t \t } 
 

 
div#footer{ 
 
\t position: relative; 
 
\t margin: 0 auto; 
 
\t top: 109px; 
 
\t background-color: #333333; 
 
\t color: white; 
 
\t text-align: center; 
 
\t font-size: 14px; 
 
\t width: 1000px; 
 
\t padding: 10px; 
 
\t }

我的#header和#nav必須設置爲960像素按照教官要求的寬度,和我m確定他希望我的#headerImg中的圖像位於我的#header div中,但是我無法使圖像重疊。因此,這是我可以集中的3個唯一的div。

我試過使用margin:0 auto;並顯示:阻止兩個,但他們似乎並沒有工作。我嘗試使用保證金:0 10%,似乎在我的電腦上工作,但在另一臺電腦上沒有對齊。我在代碼中的評論只是爲了展示我在div中的內容。

+4

'保證金:0汽車;'不工作的絕對定位的元素。 – APAD1 2014-10-09 16:20:07

回答

0

嘗試添加DIV#頭和股利#導航規則如下:

margin-left: -500px; 
left: 50%; 
+1

謝謝!這樣做,一旦我這樣做了,我不得不將我的#headerImg更改爲相同的規則。一切看起來不錯。再次感謝。 – ChelseaH 2014-10-09 17:30:12