2012-06-21 59 views
1

我想中心在我的背景,我通常沒有任何問題的容器股利。我通常只需添加css「margin:0 auto;」。那麼對於這個網站,我不知道爲什麼,它可能是MIME類型或CSS3或其他東西...但div不會居中。使用餘量:0自動,Div仍然不居中

這是我的HTML ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<HEAD> 
<TITLE>title</TITLE> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

    <BODY> 
     <div class="container"> 
     </div> 
    </BODY> 
</HTML> 

這裏是我的CSS ...

body { 
    background-image: linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -o-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -moz-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -webkit-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -ms-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop (0.3, #000000), color-stop(0.9, #0000FF)); 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    width: 0; 
} 

.container 
{ 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 940px; 
    z-index: 0; 
    width: 940px; 
    top: -10px; 
    height: 80%; 
    background-color: #F0F8FF; 
    border-radius: 0px 0px 35px 35px; 
    -moz-border-radius: 0px 0px 35px 35px; 
    -webkit-border-radius: 0px 0px 35px 35px; 
    border: 10px solid #696969; 
} 

並請忽略我的CSS可怕的格式。這不是它在文件中的方式,那只是錯誤複製它。另外我最初測試的瀏覽器是Chrome。

+2

使用觸發標準模式一個DOCTYPE 。您正在使用[quirks模式](http://en.wikipedia.org/wiki/Quirks_mode),這只是要求麻煩。 – Quentin

回答

5

body在CSS規則刪除width: 0;,就像這樣:

body { 
    background-image: linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -o-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -moz-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -webkit-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -ms-linear-gradient(left top, #000000 30%, #0000FF 90%); 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop (0.3, #000000), color-stop(0.9, #0000FF)); 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 
+0

這是正確的......你告訴瀏覽器在方格2內放置一個方形1,然後劃分左右兩側之間的額外水平空間......但沒有任何因爲方格1大於方格2。 – AlexMA

0

你沒有一個HTML標籤來啓動該文件,確保可以創建一個問題

相關問題