我们常常会在开发前端的时候遇见一些层啊图片啊文字啊的居中问题,有时,我们用text-align="center"就可以解决,有时候发现不行,那是自己没搞清楚text-align="center"的用途,它只能针对文字在容器里的居中。如果是层在层中,或者层在body中,要居中,就不能用这句话了。
一、层居中:
网上有很多人说用margin:0 auto;再设置一下层的宽度可以居中,可是这在ie下是不行的,他不会居中,如下:
<div style="margin: 0 auto; width: 980px;">
居中不,你这
</div>
这样是不行的,火狐我测试过是可以居中的,但IE不行,搞毛啊,我们的大部分的用户还不都是ie和360浏览器么。。。后来研究了半天才发现,人家说用margin:0 auto;再设置一下层的宽度可以居中是对的,只是因为我新建的jsp中页头的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">这个设置影响的,浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码,我把它写成<!DOCTYPE HTML>,就可以居中了,在各大浏览器都可以了,天哪,我写了几年代码居然不知道这个设置居然会影响居中!!!
其实还有一种方法可以让层居中,就是用Js来控制,不过这样不太好,只有没办法的情况下,或许才会这么用吧:
<script type="text/javascript">
var obj=document.getElementById("id");
//获取宽高
var wid=obj.clientWidth;
var bodyWidth= document.body.clientWidth;
obj.style.marginLeft=(bodyWidth-wid)/2+"px";
</script>
二、图片居中
一般我们是在div或p标签里让图片居中,可以用如下:
<div align="center">
<img src="<%=basePath %>/logo.gif">
</div>
这个在各大浏览器,我都测试过了,可以让图片水平居中