前段时间做的一个网络应用程序,在后期的测试时发现了一个问题。在不同的显示器(17寸/19寸)上显示有很大的区别。我的登录界面在19宽屏上就不是居中显示了。
想了很多方法,在17屏上就没问题,居中显示。后来考虑采用固定宽高的DIV来显示登录的界面,可以实现居中的效果,并已测试通过。
首先在CSS文件中添加DIV的样式,具体如下:
.div { position:absolute; top:50%;left:50%; width:980px;height:368px; margin:-184px 0 0 -490px; border:0px solid #000000; }
position:absolute,绝对定位,可以把这个div看成漂浮于这个页面之上的,通过top:50%和left:50%定位这个div的位置,但这个时候,垂直与水平居中的是这个div 左上角这一点。
所以,要让这个div的中心点位于整个页面的中间,需要使用负边界,负的上边界,负值是高度的一半;负的左边界,负值是宽度的一半。
然后,把登录界面的table包含在<div></div>中,同时设定<div class='div'>。最后别忘了在<HEAD></HEAD>中加入CSS文件的引用: