今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。
从最简单的开始…………
一、如何让一个DIV水平居中?
这个简单不作过多说明!
<style>
body { text-align:center}
#info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id=”info”>this is test.</div>
</body>
提示:您可以先修改部分代码再运行
二、DIV已知高度,如何让他水平加垂直居中?
如果想水平加垂直居中的DIV已知高度和宽度,是最好办的了!
1、先让这个DIV绝对定位;
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽的一半就可以了,也就是200PX; 向上呢也同理;
<style>
#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;}
</style>
<div id=”info”>this is test.</div>
提示:您可以先修改部分代码再运行
三、DIV不知道高度怎么让他水平和垂直居中?
这个比较麻烦,用上边的方法的一半再加一些代码才能实现!
首先我先按上边代码意思接着写,注意,下边的代码是我写好的第一步,只支持IE6和IE7,不过先看一下!
新闻热点
疑难解答