讓IE也支持margin居中告別text-align:center
發(fā)布時間：2012-12-31 15:57:11 作者：佚名 
我要評論
我要評論謹(jǐn)以此篇獻(xiàn)給那些和我一樣使用 myeclipse 開發(fā)，為了在 IE 下居中一直使用 text-align:center 居中的童鞋,接下來介紹讓IE也支持margin居中的實(shí)現(xiàn)方法
謹(jǐn)以此篇獻(xiàn)給那些和我一樣使用 myeclipse 開發(fā)，為了在 IE 下居中一直使用 text-align:center 居中的童鞋。
廢話不多說，解決辦法是在 DOCTYPE 中加上 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"，如下一段簡單的代碼便可在主流瀏覽器中居中，包括IE6：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>margin auto</title>
</head>
<body>
<div style="width:100px;height:100px;margin:auto auto;background:red;">
</div>
</body>
</html>
還有的解決辦法就是使用 XHTML 文件頭：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>margin auto</title>
</head>
<body>
<div style="width:100px;height:100px;margin:auto auto;background:red;">
</div>
</body>
</html>
我是一直使用 myeclipse 開發(fā)，不管前臺后臺，因?yàn)?myeclipse 生成的 jsp 文件 DOCTYPE 文件頭不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件，使得我一直認(rèn)為 IE 不支持 margin 居中，再加上一個學(xué) C# 的童鞋也是建議我不要一直使用 margin 居中，IE 對 auto 解析的不夠好（引用他人，非本人觀點(diǎn)），使得我以前都是使用 text-align 居中，想想就悲催，那多寫了多少代碼啊？不知傷了多少腦細(xì)胞，對于一個程序員而言，腦細(xì)胞多重要啊。
myeclipse 自動生成的文件頭是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
...
廢話不多說，解決辦法是在 DOCTYPE 中加上 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"，如下一段簡單的代碼便可在主流瀏覽器中居中，包括IE6：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>margin auto</title>
</head>
<body>
<div style="width:100px;height:100px;margin:auto auto;background:red;">
</div>
</body>
</html>
還有的解決辦法就是使用 XHTML 文件頭：
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>margin auto</title>
</head>
<body>
<div style="width:100px;height:100px;margin:auto auto;background:red;">
</div>
</body>
</html>
我是一直使用 myeclipse 開發(fā)，不管前臺后臺，因?yàn)?myeclipse 生成的 jsp 文件 DOCTYPE 文件頭不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件，使得我一直認(rèn)為 IE 不支持 margin 居中，再加上一個學(xué) C# 的童鞋也是建議我不要一直使用 margin 居中，IE 對 auto 解析的不夠好（引用他人，非本人觀點(diǎn)），使得我以前都是使用 text-align 居中，想想就悲催，那多寫了多少代碼啊？不知傷了多少腦細(xì)胞，對于一個程序員而言，腦細(xì)胞多重要啊。
myeclipse 自動生成的文件頭是：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
...
相關(guān)文章
- 2009-06-19
CSS里的各種水平垂直居中基礎(chǔ)寫法心得總結(jié)
介紹一下行內(nèi)元素和塊級元素，這個很重要，因?yàn)橛械膶傩灾荒苡糜趬K元素，而有的正好相反，在一定的情況下，它們也可以相互轉(zhuǎn)換，比如用display來進(jìn)行設(shè)置，感興趣的朋友可2013-05-06css圖片垂直居中 css中如何實(shí)現(xiàn)圖片垂直居中
使用純CSS實(shí)現(xiàn)未知尺寸的圖片(但高寬都小于200px)在200px的正方形容器中水平和垂直居中，下面是一個權(quán)衡的相對結(jié)構(gòu)干凈，CSS簡單的解決方法2013-04-17css自適應(yīng)寬度 多種方法實(shí)現(xiàn)寬度自適應(yīng)的水平居中
寬度自適應(yīng)達(dá)到水平居中在網(wǎng)頁制作中很常見而且很實(shí)用，本文整理搜集了一些實(shí)用的自適應(yīng)寬度的水平居中技巧，感興趣前端工程師們可以借鑒一下，或許對你有所幫助2013-04-05關(guān)于圖片垂直居中的話題想必大家在論壇或者是百度搜索列表中看到了不少了吧，煩人的是沒有具體或者相當(dāng)詳細(xì)的解決方法，希望本文所整理的知識點(diǎn)可以幫助到你2013-03-22在CSS中加了margin:0 auto;卻沒有效果，不能居中的問題；它的本意就是上下邊界為0，左右根據(jù)寬度自適應(yīng)！其實(shí)就是~~水平居中的意思，接下來為大家介紹下兩個典型的錯誤引起2013-03-15div垂直居中的N種方法 單行/多行文字(未知高度/固定高度)
接下來將介紹下：div垂直居中的N種方法包括:單行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解決方案等等感興趣的你可不要錯過了2013-02-17單選框和復(fù)選框面積很小，不容易點(diǎn)擊，造成許多用戶的困擾，用戶體驗(yàn)不佳，所以表單元素的垂直居中讓很多網(wǎng)頁布局師為之而困擾，想實(shí)現(xiàn)垂直居中效果還真需要一番功夫，還好2013-02-16元素及文本的居中包括(層的橫向居中/層的垂直居中/絕對居中)以及文本掙開div的題，也在這里給予了解決方法，感興趣的朋友可以了解下啊，希望本文可以幫助到你2013-01-18三種方式實(shí)現(xiàn)元素水平居中顯示與固定布局和流式布局概念理解
css中讓文本居中的屬性很簡單就可以實(shí)現(xiàn)，那就是設(shè)置text-align:center即可,讓元素水平居中，相信對于許多網(wǎng)頁設(shè)計師而言都不會陌生,首先，要 讓元素水平居中，就必須得了2013-01-11最新評論