由于工作需要,要求一个层在浏览器中上下左右居中,并适应不同分辨率.
刚开始时想到小菜一碟,只在相对绝对一出,搞定.
接着进入实践阶段,才发现并不是如此.
XML/HTML代码
- <style type="text/css">
- <!--
- * {margin:0;padding:0}
- div {
- width:500px;
- height:500px;
- border:1px solid #ccc;
- overflow:hidden;
- position:relative;
- display:table-cell;
- text-align:center;
- vertical-align:middle
- }
- div p {
- position:static;
- +position:absolute;
- top:50%
- }
- img {
- position:static;
- +position:relative;
- top:-50%;left:-50%;
- width:276px;
- height:110px
- }
- -->
- </style>
- <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
正如上面的代码一样,只能在有 高度 的情况下才有作用.否则一切免谈.
于是,决定使用JS.
思路->获取浏览器窗口的可视区域大小->获取层的宽高->两者相减则得到的数值则为定位中top与left的值->给值->完成.
XML/HTML代码
- <script type="text/javascript">
- function aidesi(){
- var winWidth = document.documentElement.clientWidth;
- var winHeight =document.documentElement.clientHeight;
- var aide = document.getElementById("aide");
- var aideimg = document.getElementById("aideimg");
- aide.style.top= (winHeight-aideimg.height)/2+"px";
- aide.style.left= (winWidth-aideimg.width)/2+"px";
- }
- </script>
- <style>
- #aide{z-index:1;position:absolute;}
- </style>
- <div id="aide" style="">
- <img id="aideimg" src="http://www.google.com/intl/en/images/logo.gif" alt="" onload="aidesi()" />
- </div>
在这个过程中,发生了一件令我深思的事件.就是不清楚为什么FF一直获取不到winWidth与winHeight,最后请教Franky,得到的结果是正常,大体还可以优化.
于是我再折腾FF.最后还是花随提醒,是不是由于FF禁用了JS的原因才造成取值不成功.
检查,才发现真不知道自己的本本里FF如时禁用了JS.时间就这样过去了.
得到:小细节要注意.
最后放出 demo
