页面设计:层的水平、垂直居中
如果只需要层的水平居中相对来说很简单,如下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: }
没有评论:
发表评论