让IE也支持margin居中告别text-align:center
发布时间：2012-12-31 15:57:11 作者：佚名 
我要评论
我要评论谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 IE 下居中一直使用 text-align:center 居中的童鞋,接下来介绍让IE也支持margin居中的实现方法
谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 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 开发，不管前台后台，因为 myeclipse 生成的 jsp 文件 DOCTYPE 文件头不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件，使得我一直认为 IE 不支持 margin 居中，再加上一个学 C# 的童鞋也是建议我不要一直使用 margin 居中，IE 对 auto 解析的不够好（引用他人，非本人观点），使得我以前都是使用 text-align 居中，想想就悲催，那多写了多少代码啊？不知伤了多少脑细胞，对于一个程序员而言，脑细胞多重要啊。
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：
复制代码
代码如下:<!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 开发，不管前台后台，因为 myeclipse 生成的 jsp 文件 DOCTYPE 文件头不包含 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" dtd 文件，使得我一直认为 IE 不支持 margin 居中，再加上一个学 C# 的童鞋也是建议我不要一直使用 margin 居中，IE 对 auto 解析的不够好（引用他人，非本人观点），使得我以前都是使用 text-align 居中，想想就悲催，那多写了多少代码啊？不知伤了多少脑细胞，对于一个程序员而言，脑细胞多重要啊。
myeclipse 自动生成的文件头是：
复制代码
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
...
相关文章
- 2009-06-19介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置，感兴趣的朋友可2013-05-06使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中，下面是一个权衡的相对结构干净，CSS简单的解决方法2013-04-17宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助2013-04-05关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你2013-03-22在CSS中加了margin:0 auto;却没有效果，不能居中的问题；它的本意就是上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，接下来为大家介绍下两个典型的错误引起2013-03-15
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
接下来将介绍下：div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了2013-02-17单选框和复选框面积很小，不容易点击，造成许多用户的困扰，用户体验不佳，所以表单元素的垂直居中让很多网页布局师为之而困扰，想实现垂直居中效果还真需要一番功夫，还好2013-02-16元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题，也在这里给予了解决方法，感兴趣的朋友可以了解下啊，希望本文可以帮助到你2013-01-18css中让文本居中的属性很简单就可以实现，那就是设置text-align:center即可,让元素水平居中，相信对于许多网页设计师而言都不会陌生,首先，要 让元素水平居中，就必须得了2013-01-11
最新评论