首頁  >  文章  >  web前端  >  html裡div居中需要注意哪些

html裡div居中需要注意哪些

php中世界最好的语言
php中世界最好的语言原創
2017-11-23 17:18:302265瀏覽

很多人有這樣的疑惑。當我們在佈局一張網頁時,通常網頁主體框架是居中於瀏覽器中的。那麼如果想要實現最外層DIV水準居中那麼肯定需要單獨設定。設定div居中需要注意哪些事項呢?今天就來跟大家介紹一下。

假如最外層DIV盒子的CSS命名為“#divcss5”,這個時候為了兼容各大瀏覽器實現最外層的這個盒子居中。

一條件:

這個時候對「body」設定css內容居中樣式(text-align:center)

即CSS程式碼:

body{text-align:center}

一個設定:

這個時候為「#divcss5」設定居中必備樣式css margin

即CSS程式碼:

#divcss5{margin:0 auto}

DIV居中用法實例 

為了方便觀察佈局居中效果,我們再為「#divcss5」加上css邊框為黑色,css寬度為300px;高度為100px樣式。

1、最終得到DIV居中的CSS程式碼:

body{ text-align:center} 
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

2、對應html程式碼片段:

<div id="divcss5">DIV水平居中案例</div>

div居中需要注意的事項就這麼多了,更多精彩請關注php中文網其它相關文章!

相關推薦:

html 的1aa9e5d373740b65a0cc8f0a02150c53標籤需要怎麼使用

html文檔類型宣告怎麼寫

css3裡怎麼顯示圓形圖片

#

以上是html裡div居中需要注意哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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