2011-05-18 146 views
0

我有以下的CSS:圍繞一個div谷歌瀏覽器

html, body { 
     background-color:black; 
     font-family:"arial bold"; 
     overflow:auto; 
     text-align: center; 
    } 
div#content { 
     width:792px; 
     height:100%; 
     padding:0px; 
    } 

div#header { 
     height:216px; 
     width:100%; 
    } 

的HTML代碼,我已經是:

<html> 
    <head> 
     <title> 
      Think in a NEW BOX. 
     </title> 

     <link rel="stylesheet" type="text/css" href="styles/default.css" /> 
    </head> 
    <body onload=""> 
     <div id="content"> 
      <div id="header"> 
       <img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" /> 
      </div> 
     </div> 
    </body> 
</html> 

現在,這在IE的偉大工程。 div中心完美(標題)。然而,在谷歌瀏覽器中,div是左對齊的。我錯過了什麼嗎?

回答

2

更詳細的解釋我有這個「問題」太今天看到Centring using CSS。用display: inline-block;解決。工作的瀏覽器不會改變,如果它已經工作,這不會混淆舊的IE。

+0

雖然它會讓IE不老。 – Quentin 2011-05-18 18:34:53

2

你缺少:

  1. 一個DOCTYPE(從IE 4/5天,以便IE瀏覽器是模擬的錯誤,以應對可怕的,古老的網頁)
  2. 一個div元素是塊元素使text-align不影響它
  3. auto div上的左右邊距。

與圖

1

確保您有固定寬度並使用margin: 0 auto;

2

使用

#content { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100px; /* Your width */ 
} 

居中的DIV。它允許你的div爲左和右選擇一個可變的餘量,這導致了一個居中的div。這應該適用於全部瀏覽器。

2

更好的解決辦法是居中塊這樣的:

#content 
{ 
    margin:0px auto; 
} 

此方法由...很好用的,只是每個人(包括SO)。