2008年5月27日星期二

页面设计:层的水平、垂直居中

如果只需要层的水平居中相对来说很简单,如下CSS定义:

   1: body { text-align:center; }
   2: div { width:80%;margin-left:auto;margin-right:auto;text-align:left; }

而垂直居中时,如果不定义层的绝对高度,在IE浏览器下可以借助CSS的expression,非IE浏览器就只能使用javascript,这里不做讨论。代码如下:



   1: div { 
   2:     width:60%;
   3:     height:60%;
   4:     position:absolute;
   5:     top:50%;
   6:     left:50%;
   7:     margin-top:expression(parseInt(this.offsetHeight/2)-this.offsetHeight);
   8:     margin-left:expression(parseInt(this.offsetWidth/2)-this.offsetWidth);
   9: }

定义层的绝对高度将很简单,其实就是使用负外边距的技巧:



   1: div { 
   2:     width:600px;
   3:     height:400px;
   4:     position:absolute;
   5:     top:50%;
   6:     left:50%;
   7:     margin-left:-300px;
   8:     margin-top:-200px;
   9: }

没有评论:

发表评论