尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}xhtml
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。
CSS
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}xhtml
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
</div>
</div>
</div>以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。
解决方案 »
- php 代码被加密eval(gzinflate(str_rot13(base64_decode
- phpexcel使用
- php上传问题
- 散分 + experts-exchange 感想
- 为什么从mysql里取出的字符串都显示“??”
- php 收录批量查询 只能查一条
- 主题:寻找合作伙伴,美工一名,ASP程序员数名。
- 需要从比较稳定的新闻源获取新闻,请问用著名网站的滚动新闻好,还是用新闻组(nntp协议连接)的好?
- 哪位PHP高手帮帮我?
- 为什么thinkphp都没有require include引用 就可以继承 或者使用里面的东西了?
- cookie如何跨域有效?
- 通过Google Checkout付费后如何返回我的网站?
css:
body,html{
margin: 0;
background-color:#000000;
height: 100%;
}
#outer {
position: absolute;
width: 100%;
top: 50%;
}
#outer[id] {
height: 100%;
display: table;
position: static;
}
#inner {
position: relative;
top: -50%;
}
#inner[id] {
display: table-cell;
vertical-align: middle;
} div.greenBorder {border: 1px solid green; background-color: ivory;}xhtml:
<div id= "outer ">
<div id= "inner " class= "greenBorder ">
这是优化后的代码。
</div>
</div>
高度居中,适合标准与非标准浏览器。标准的以firefox为代表,非标准低饿以ie为代表。
原理:
使用div网页居中定位,为兼容firefox需要一个display为table的outer和display为table-cell的inner,
然而ie不支持display,ie居中的原理是使用top属性:有一个绝对50%定位的outer和相对50%定位的inner,相减的值刚好使它
在网页居中,这个原理等同于outer.height/2-inner.height/2。
另外一个约束是firefox需要设置html,body,以及outer的height都为100%才能正常工作。ie定位则不能指定高度。
这时可以使用#outer[id],在#outer[id]中与#outer冲突的设置会覆盖#outer中的设置,没有冲突的会保留设
置。于是就有两套样式分别对应ie和firefox
优化后的代码没有设置水平居中。其实可以通过改为:
#inner {
position: relative;
top: -50%;
text-align:middle;
}
让内容水平居中的。但更好的方法是设置div的属性例如:
<div id="outer">
<div id="inner" align="center">
<img src="image/login/loginBackground.jpg" alt="登陆页面" width="1007" height="605" />
</div>
</div>
这样可以选择div最左,最右,居中。只让css实现高度居中,这样就把高度居中功能单独分离出来。水平则任意。