明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

html里div居中需要注意哪一些

[摘要]很多人有這樣的疑惑。當(dāng)我們?cè)诓季忠粡埦W(wǎng)頁(yè)時(shí),通常網(wǎng)頁(yè)主體框架是居中于瀏覽器中的。那么如果想要實(shí)現(xiàn)最外層DIV水平居中那么肯定需要單獨(dú)設(shè)置。設(shè)置div居中需要注意哪些事項(xiàng)呢?今天就來(lái)給大家介紹一下。假如最外層DIV盒子的CSS命名為“#divcss5”,這個(gè)時(shí)候?yàn)榱思嫒莞鞔鬄g覽器實(shí)現(xiàn)最外層的這個(gè)盒子...
很多人有這樣的疑惑。當(dāng)我們?cè)诓季忠粡埦W(wǎng)頁(yè)時(shí),通常網(wǎng)頁(yè)主體框架是居中于瀏覽器中的。那么如果想要實(shí)現(xiàn)最外層DIV水平居中那么肯定需要單獨(dú)設(shè)置。設(shè)置div居中需要注意哪些事項(xiàng)呢?今天就來(lái)給大家介紹一下。

假如最外層DIV盒子的CSS命名為“#divcss5”,這個(gè)時(shí)候?yàn)榱思嫒莞鞔鬄g覽器實(shí)現(xiàn)最外層的這個(gè)盒子居中。

一條件:

這個(gè)時(shí)候?qū)Α癰ody”設(shè)置css內(nèi)容居中樣式(text-align:center)

即CSS代碼:

body{text-align:center}

一設(shè)置:

這個(gè)時(shí)候?qū)Α?divcss5”設(shè)置居中必備樣式css margin

即CSS代碼:

#divcss5{margin:0 auto}

DIV居中用法實(shí)例

為了便于觀察布局居中效果,我們?cè)賹?duì)“#divcss5”加一個(gè)css邊框?yàn)楹谏,css寬度為300px;高度為100px樣式。

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

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

2、對(duì)應(yīng)html代碼片段:

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

div居中需要注意的事項(xiàng)就這么多了,更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

相關(guān)推薦:

html 的<header>標(biāo)簽需要怎么使用

html文檔類型聲明怎么寫

css3里怎么顯示圓形圖片

以上就是html里div居中需要注意哪些的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ),涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。