今天有人問起,晚上試著寫出來,供參考; 以下代碼兼容主流瀏覽器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,不過先看一下!
新聞熱點
疑難解答