CSS布局之再談CSSDiv的居中實(shí)現(xiàn)方法_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
在MB5U.com前面的文章中,我們談?wù)撨^(guò)很多關(guān)于居中的問(wèn)題。前幾日有一篇文章談了DTD與居中的相互關(guān)系。原文見(jiàn)鏈接。
Div CSS教程:DTD(文檔類(lèi)型)影響margin實(shí)現(xiàn)居中的分析
關(guān)于CSS控制DIV水平居中問(wèn)題,我看到很多新人搞不明月。記得第一次看CSS是一個(gè)老外寫(xiě)的書(shū),那個(gè)里面談到居中使用。
示例代碼 [m.dounai2.com]
margin-left:auto;
margin-right:auto;
其實(shí)等同于:
margin:0 auto;
margin-right:auto;
其實(shí)等同于:
margin:0 auto;
于是可以使用這種方式,但是有人用IE時(shí)發(fā)現(xiàn)沒(méi)有居中。這里建議你看看是否遺漏了DTD聲明。
示例代碼 [m.dounai2.com]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
非常多的人犯過(guò)類(lèi)似的錯(cuò)誤!這種方法也可以說(shuō)屢試不爽,但是在某些情況下還是行不通的。于是有了第二種方法。
示例代碼 [m.dounai2.com]
margin-left:50%;
left: -width/2;
left: -width/2;
這里的width不是CSS中的Width,而是你的DIV的寬度例如你的div是768px寬,那么你就應(yīng)該設(shè)置left:-384px。很好,已經(jīng)有兩種方法了,可以說(shuō)已經(jīng)能夠解決你可能碰到的問(wèn)題了。
有時(shí)候你會(huì)發(fā)現(xiàn),這兩個(gè)還不行。不能兼容一些瀏覽器。于是發(fā)現(xiàn)有了第三種方法,這中方法主要是考慮IE,它是建立在第一種方法的基礎(chǔ)之上。它需要設(shè)置body。
示例代碼 [m.dounai2.com]
body {text-align: center;}
這樣IE下也居中了,但是它帶來(lái)一個(gè)新的問(wèn)題,你發(fā)現(xiàn)你的頁(yè)面中所有文字都是居中的,這樣很不好看。這個(gè)就很輕易解決了,只需要在你的DIV定義中加上 text-align: left; 之類(lèi)調(diào)整的設(shè)置就行了。
以上文字僅是一個(gè)飯后參考與小品。大家在實(shí)際工作中可以引起注重!
/所屬分類(lèi):Div+CSS教程/更新時(shí)間:2008-06-05
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DIVCSS菜單:黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單
- CSS實(shí)例:kijiji社區(qū)頭像CSS效果
- CSS布局欣賞:淘寶首頁(yè)布局效果
- DIVCSS菜單:縱向CSS菜單實(shí)例之橙色記憶
- CSS布局教程:DIV CSS三列式布局的實(shí)現(xiàn)方法
- CSS實(shí)例:常用的CSS隱藏文字的方法
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格
- CSS基本條狀圖表的實(shí)現(xiàn)方法是什么?
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁(yè)布局豆瓣首頁(yè)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-CSS布局之再談CSSDiv的居中實(shí)現(xiàn)方法。