一般網頁主體內容版面皆為居中於瀏覽器。如php中文網首頁,主體為居中版面。
如何使用CSS讓整個網頁佈局居中呢?佈局居中條件是什麼呢?
首先我們要對body設定css內容居中樣式(css text-align:center),然後佈局最外層DIV盒子時候使用margin:0 auto即可讓物件佈局居中。
當然我們對盒子物件使用了margin:0 auto,有的瀏覽器不對body物件加上text-align:center樣式,佈局仍然是居中的,這是因為不同瀏覽器預設樣式不同造成,如果不對body設定text-align:center,這樣會造成有的瀏覽器佈局居中,有的靠左,這樣佈局的兼容就產生了。
解釋:margin:0 auto,意思是讓物件上下間隔為0,左右間隔自動,隨物件寬度左右間隔自動,
網頁佈局居中條件
1、對body設定CSS內容居中樣式text-align:center,程式碼:body{text-align:center}
2、對最外層物件設定margin:0 auto樣式,程式碼:.php{margin:0 auto}
案例:
為了觀察到佈局居中效果,我們CSS命名物件為".php",設定CSS邊框為黑色,css寬度為400px,css高度為100px。
1、css程式碼如下:
2、HTML程式碼片段:
以上是css怎麼整體居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!