CSS在页面布局中实现div水平居中的方法总结
作者：dudo 来源：dudo博客 时间：2008-06-03 12:09:00
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：
一、margin:auto 0 与 text-aligh:center
在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现水平居中的方法很简单，只要设定到左右两侧的空白为自动即可。意即：
#wrap { margin:0 auto;}
上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。请在现代浏览器
（如Internet Explorer 7、Firefox、Opera等）中运行现在的代码：
上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式——居左对齐。因此我们要如此来写代码：
body {text-align:center;}
#wrap {text-align:left;}
这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}
演示地址：
div-center.htm （1.07 KB）
不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。
标签：布局,css,居中
0
投稿猜你喜欢
Python将字符串常量转化为变量方法总结
2023-07-14 00:36:58
Go语言实战之实现一个简单分布式系统
2024-05-05 09:33:56
js实现九宫格抽奖
2024-04-17 10:34:36
如何利用Fiddler模拟恶劣网络环境
2022-04-12 02:22:51
详解MySQL中的事务与ACID特性
2024-01-14 21:59:38
Python实现emoji表情的简单方法
2023-07-09 13:10:22
Python实现mysql数据库中的SQL文件生成和导入
2024-01-22 01:04:41
MySQL中or、in、union与索引优化详析
2024-01-18 08:21:55
在Django中URL正则表达式匹配的方法
2021-06-09 22:38:57
在windows下Python打印彩色字体的方法
2023-05-19 07:03:32
手把手教你使用Python绘制时间序列图
2021-08-04 14:32:07
python使用装饰器和线程限制函数执行时间的方法
2022-04-03 04:06:34
深入理解NumPy简明教程---数组3（组合）
2023-07-15 06:22:39
详解Scrapy Redis入门实战
2023-04-14 11:39:08
[译]JavaScript中的Timer是怎么工作的
2009-02-06 15:39:00
如何对MySQL数据库表进行锁定
2009-02-10 10:39:00
response.setHeader()方法设置http文件头的值
2010-03-11 22:43:00
python算法学习之桶排序算法实例(分块排序)
2022-09-08 13:11:33
OpenCV学习之图像形态学处理详解
2022-02-19 15:45:39
由浅入深讲解python中的yield与generator
2022-08-14 06:26:11