亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS解決未知高度的垂直水平居中自適應(yīng)問題

  發(fā)布時間：2009-04-04 03:32:38   作者：佚名   我要評論
今天有人問起，晚上試著寫出來，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡單的開始………… 一、如何讓一個DIV水平居中？ 這個簡單不作過多說明！ [code] <style> body { text-align:center} #info{ margin:0
今天有人問起，晚上試著寫出來，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。
從最簡單的開始…………
一、如何讓一個DIV水平居中？
這個簡單不作過多說明！

復(fù)制代碼
代碼如下:

<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>


提示：您可以先修改部分代碼再運(yùn)行

二、DIV已知高度，如何讓他水平加垂直居中？

如果想水平加垂直居中的DIV已知高度和寬度，是最好辦的了！
1、先讓這個DIV絕對定位；
2、讓他距離上邊50%，左邊50%；這會這個DIV的左上角這個點(diǎn)就是窗口的正中間；
3、因?yàn)橐呀?jīng)知道了這個DIV的高和寬了，那么再從這里點(diǎn)向左移動總寬的一半就可以了，也就是200PX； 向上呢也同理；

復(fù)制代碼
代碼如下:

<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>


提示：您可以先修改部分代碼再運(yùn)行

三、DIV不知道高度怎么讓他水平和垂直居中？
這個比較麻煩，用上邊的方法的一半再加一些代碼才能實(shí)現(xiàn)！
首先我先按上邊代碼意思接著寫，注意，下邊的代碼是我寫好的第一步，只支持IE6和IE7，不過先看一下！

復(fù)制代碼
代碼如下:

<style>
body {padding:0; margin:0; }
#infoBox{ position:absolute; top:50%; width:100%; text-align:center;}
#info{position:relative; top:-50%; right:0; border:1px solid #333399; text-align:center;} /*這里可以指個寬度試試，是可以自適應(yīng)的*/
</style>
<div id="infoBox">
<div id="info">
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.

</div>
</div>


提示：您可以先修改部分代碼再運(yùn)行

那么，如果讓Firefox再支持一下就可以，對吧！所以接著寫！
標(biāo)準(zhǔn)瀏覽器可將父級元素顯示方式設(shè)定為display: table;，內(nèi)部子元素設(shè)為display:table-cell 和vertical-align；使其垂直居中，但非標(biāo)準(zhǔn)瀏覽器是不支持；也就是說這樣設(shè)完后IE6是不支持的，但FIREFOX和IE是支持的；

我用的是最笨的辦法，從上往下一級級覆蓋；

復(fù)制代碼
代碼如下:

<style>
body {padding:0; margin:0; }
/*這些是專用FIREFOX寫的，注意IE7也認(rèn)識*/
html,body{ height:100%;}
#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell; vertical-align:middle;} /*這里可以指個寬度試試，是可以自適應(yīng)的*/
/*專為IE6寫的*/
*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*這里可以指個寬度試試，是可以自適應(yīng)的*/
/*這理是專用IE7寫的，注意[id]要加上，不然優(yōu)先JI沒有最上邊那段NB*/
*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*這里可以指個寬度試試，是可以自適應(yīng)的*/
</style>
<div id="infoBox">
<div id="info">
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.
this is test.

</div>
</div>
</html>


提示：您可以先修改部分代碼再運(yùn)行

這時你又會發(fā)現(xiàn)，在IE和FIREFOX中怎么效果不一樣呢？FIREFOX中沒有那個邊框；對的…… 如果你看一下info這個DIV，他其它是占高度100%的；這時的同一個布局在不同的瀏覽器是展示出來隱在效果已經(jīng)完全不一樣了；那么怎么辦？ 所以，再用最后一個辦法；再加一個空的DIV就行了，我起了個好名字，叫tnnd； 最后的效果如下；

提示：您可以先修改部分代碼再運(yùn)行

后邊這種是最麻煩的，重點(diǎn)在于IE67和FIREFOX中間的差別和他們相互之間是如何的一些關(guān)系；我看過很多關(guān)于這個問題的解決方法，都不是特別的理想，希望這種方法能解決大部分的問題！
本來以為半小時弄完，沒有想到卡在FIREFOX這里了，弄了二個多小時！周末了，不早了，凌晨2：30了，睡了！晚安……

相關(guān)資料可參考：
1、CSS解決未知高度垂直居中 -- 垂直居中方面可參考一下
2、CSS作的小燈籠效果 -- hack方面參考
轉(zhuǎn)載請注明出處：子鼠

相關(guān)文章

最新評論