2016-01-22 68 views
0

我想使它能夠讓我的身體部分在頁面中間使用填充等。但由於某些原因,它自己不會在中間的框。我不確定我是否以正確的方式進行,但是當您看到代碼時。主位被稱爲「節」這是我的主體在那裏,我所有的文字等填充的身體元素增加值

主要代碼:

http://codepen.io/Blindeagle141/pen/mVpYyM

正如你所看到的。藍色框仍然在左側。我需要它是在頁面的只是像這樣的中心:

----------------------------------------------- 
| |         |  |      
|-----------------------------------------------       
| |Logo      Nav Bar|  | 
|-----------------------------------------------       
| |         |  |     
| |         |  |      
| |    Body    |  |     
| |         |  |      
| |         |  |      
|-----------------------------------------------       
| |Logo      Info |  | 
|-----------------------------------------------       
| |         |  |      
----------------------------------------------- 
+0

'margin:0 auto'。可能的副本[水平居中在一個div中的div](http://stackoverflow.com/q/114543/1529630) – Oriol

+0

看看flex的css對於這個 –

回答

2

要居中如果你希望它是頭下方的股利水平與margin: 0px auto

更換padding屬性,還需要指定垂直餘量,例如margin: 150px auto 0px auto

基本上,填充移動標記的DIV,所以背景色仍會跨越填充。如果你想移動整個div的邊界,請使用margin。這被稱爲盒子模型,用它作爲定位的參考。

box model

+0

你很好。謝謝xx – MadMan

2

,我們需要檢查的第一件事是填充的使用,它被用於對內容的距離設置爲元素的邊框,在這裏:

<section> 
    <p>Body</p> 
</section> 

填充會將<p>body</p>的距離設置爲元素<section></section>。我們要的是對的<section></section>的距離設置爲其父所以不是填充使用保證金,像這樣:

section{ 
    background-color: cornflowerblue; 
    height: 100px; 
    width: 200px; 
    margin: 0 auto; 
} 

這將使<section></section>元素在中心。

+0

非常感謝!工作 – MadMan