首頁  >  文章  >  web前端  >  css怎麼整體居中

css怎麼整體居中

anonymity
anonymity原創
2019-05-28 11:57:5515296瀏覽

一般網頁主體內容版面皆為居中於瀏覽器。如php中文網首頁,主體為居中版面。

如何使用CSS讓整個網頁佈局居中呢?佈局居中條件是什麼呢?

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程式碼片段:

物件php佈局居中了
 

##

以上是css怎麼整體居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn