网络编程
位置:首页>> 网络编程>> 网页设计>> CSS解决未知高度的垂直水平居中自适应问题(4)

CSS解决未知高度的垂直水平居中自适应问题(4)

作者:zishu 来源:zishu博客 发布时间:2009-03-17 17:06:00 

标签:css,问题,自适应,垂直居中

标准浏览器可将父级元素显示方式设定为display: table;,内部子元素设为display:table-cell 和vertical-align;使其垂直居中,但非标准浏览器是不支持;也就是说这样设完后IE6是不支持的,但FIREFOX和IE是支持的;

我用的是最笨的办法,从上往下一级级覆盖;


<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:-50%; 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:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试,是可以自适应的*/
</style>
<div id="infoBox">
 <div id="info">
   this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />this is test.<br />
 </div>
</div>
</html>


0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com