说到页面居中,我想对于每个web开发者来说都不陌生,我们常用的方法会是用js来解决,
但是用js会有很多问题,比如:
1、一般是将居中代码放在页面加载的函数中,这就有问题了,如果页面从一个屏幕拉到另
一个屏幕,居中代码不会执行,居中失效
2、不同浏览器对于js的执行不尽相同,很可能你会遇到一些比较奇怪的问题,但是就是找
不到原因
那么我们该如何去做了,在做了一些demo后,觉得用css实现会比较好,三大主流浏览器都
测试过了,下面列出大概做法:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE
这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再
加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
代码样例如下
<html> <head> <style> body{TEXT-ALIGN: center;} #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:400px; background:#ffffff; width:400px; } </style> </head> <body> <div id="center"></div> </body></html>
PS:需要居中的子元素需要用数值指定其宽度,不能用百分数