2013-06-12 223 views
0

是的,還有其他的問題;但我無法按照他們的指示製作這個div中心。爲什麼?無法水平居中div

HTML

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css"> 
    </head> 
    <body> 
     <div> 
      <div class="center"></div> 
     </div> 
    </body> 
</html> 

CSS:

body { 
    line-height: 1; 
} 

.center { 
    position: fixed; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
} 
+0

您的文檔是否有文檔類型聲明? – Matthew

+0

不需要額外的div ... – poke

+0

Matthew - HTML頁面。打 - 不如現在。我試圖在外部創建一個具有背景顏色的div,然後將我的內部div集中在該外部div中。 –

回答

1

position: fixed使自己在div絕對位置(和固定,使它留在當前滾動時)。這意味着汽車保證金將不起作用。您可以通過刪除位置規則解決這個問題,或者通過定位DIV絕對不是:

.center { 
    position: fixed; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px; 
} 

在一個不相關的音符,附加div是完全沒用的,你可以只留下了這一點。此外,divs默認爲塊元素,因此您也可以省略display: block;規則。

+0

感謝戳,這是我正在尋找的答案。我修正了它,因爲我不想滾動它,但希望它在頁面中居中。 –

1

從div的風格取下position: fixed

此外,您不需要display:block ...它應該默認爲無論如何。戳是正確的,你不應該需要額外的股利。

下面是它的工作的例子... http://jsfiddle.net/VYmw6/1/

1

有什麼理由爲什麼你用position: fixed?但無論如何希望這可以幫助您

CSS:

.center { 
    margin: 0 auto; 
    width: 300px; 
} 

Demo

-1

更改您的代碼以

<center> 
    <div> 
      content 
    </div> 
</center> 

基本上,附上您要爲中心的標籤內的股利。

希望這有助於您的項目和所有最好的:-)

+0

這些天沒有人使用「中心」標籤。如果你這樣做,我甚至不知道從哪裏開始我的評論... – amn

+0

已降級,'

'已棄用。 – user2019515

1

使用它!

.center { 

margin-left: auto; 
margin-right: auto; 
width: 300px; 
} 

or 

.center { 

margin:0 auto; 
width: 300px; 
} 

這裏是Fiddle !!

+0

沒有必要爲「div」元素指定「display:block」,它們默認顯示爲塊元素。至少,根據CSS 2.1規範中推薦的默認樣式表http://www.w3.org/TR/CSS21/sample.html – amn

+0

感謝amn :),我編輯了我的答案! – zey