CSS处理未知高宽比的竖直水平垂直居中自融入难

2021-03-15 02:32 jianzhan
今日有人问起,夜里试着写出来,供参照; 下列编码适配流行访问器IE6、IE7、Firefox、Opera。
从最简易的刚开始…………
1、怎样让1个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>


提醒:您能够先改动一部分编码再运作

2、DIV已知高宽比,怎样让他水平加竖直垂直居中?

假如想水平加竖直垂直居中的DIV已知高宽比和宽度,是最好是办的了!
1、先让这个DIV肯定精准定位;
2、让他间距上边50%,左侧50%;这会这个DIV的左上角这个点便是对话框的中间;
3、由于早已了解了这个DIV的高和宽了,那末再从这里点向左挪动总宽的1半便可以了,也便是200PX; 向上呢也同理;

拷贝编码
编码以下:

<style>
#info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:⑵00px ⑶00px; border:1px solid #f00;}
</style>
<div id="info">this is test.</div>


提醒:您能够先改动一部分编码再运作

3、DIV不知道道高宽比如何让他水平静竖直垂直居中?
这个较为不便,用上边的方式的1半再加1些编码才可以完成!
最先我先按上边编码意思接着写,留意,下边的编码是我写好的第1步,只适用IE6和IE7,但是先看1下!

拷贝编码
编码以下:

<style>
body {padding:0; margin:0; }
#infoBox{ position:absolute; top:50%; width:100%; text-align:center;}
#info{position:relative; top:⑸0%; right:0; border:1px solid #333399; text-align:center;} /*这里能够指个宽度试试,是能够自融入的*/
</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>


提醒:您能够先改动一部分编码再运作

那末,假如让Firefox再适用1下便可以,对吧!因此接着写!
规范访问器可将父级元素显示信息方法设置为display: table;,內部子元素设为display:table-cell 和vertical-align;使其竖直垂直居中,但非规范访问器是不适用;也便是说这样设完后IE6是不适用的,但FIREFOX和IE是适用的;

我用的是最笨的方法,从上往下1级级遮盖;

拷贝编码
编码以下:

<style>
body {padding:0; margin:0; }
/*这些是专用FIREFOX写的,留意IE7也了解*/
html,body{ height:100%;}
#infoBox[id]{text-align:center; width:100%; height:100%; display:table;}
#info[id]{ display:table-cell; vertical-align:middle;} /*这里能够指个宽度试试,是能够自融入的*/
/*专为IE6写的*/
*html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*html #info{position:relative; top:⑸0%; border:1px solid #333399; text-align:center;} /*这里能够指个宽度试试,是能够自融入的*/
/*这理是专用IE7写的,留意[id]要再加,要不然优先选择JI沒有最上边那段NB*/
*+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto}
*+html #info[id]{position:relative; top:⑸0%; border:1px solid #333399; text-align:center;} /*这里能够指个宽度试试,是能够自融入的*/
</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>


提醒:您能够先改动一部分编码再运作

这时候你又会发现,在IE和FIREFOX中如何实际效果不1样呢?FIREFOX中沒有那个边框;对的…… 假如你看1下info这个DIV,他其它是占高宽比100%的;这时候的同1个合理布局在不一样的访问器是展现出来隐在实际效果早已彻底不1样了;那末如何办? 因此,再用最终1个方法;再加1个空的DIV就可以了,我起了个好姓名,叫tnnd; 最终的实际效果以下;

提醒:您能够先改动一部分编码再运作

后面这类是最不便的,关键在于IE67和FIREFOX正中间的区别和她们互相之间是怎样的1些关联;我看过许多有关这个难题的处理方式,都并不是非常的理想化,期待这类方式能处理绝大多数的难题!
原本认为半小时弄完,沒有想起卡在FIREFOX这里了,弄了2个多小时!周末了,不早了,零晨2:30了,睡了!晚安……

有关材料可参照:
1、CSS处理未知高宽比竖直垂直居中 -- 竖直垂直居中层面可参照1下
2、CSS作的灯笼实际效果 -- hack层面参照
转载请注明出处:子鼠