实现div垂直居中的display:table-cell⽅法⽰例介绍ie7和ie6都不能识别 display: table-cell;(但是⽀持display: block等css1的属性!)
ie8以及以后版本可以识别!
ie7和ie6能识别vertical-align:middle;
如果盒模型中间只有⼏段⽂字的话,设置line-height就可以实现居中显⽰了!
如果要实现盒模型中的div居中,可以参考以下代码:
CSS Code复制内容到剪贴板
1. div#wrap {
2. display: table;
3. border: 1px solid #FF0099;
css设置文字垂直居中4. background-color: #FFCCFF;
5. width: 760px;
6. height: 400px;
7. *position: relative;
8. overflow: hidden;
9. }
10.
11. div#subwrap {
12. vertical-align: middle;
13. display: table-cell;
14. *position: absolute;
15. *top: 50%;
16. }
17.
18. div#content {
19. *position: relative;
20. *top: -50%;
21. }
效果:
这个是多浏览器兼容的,但是得写⼏层div~ 但是想在层或img在层中垂直⽔平居中该怎样做呢?下⼀篇会涉及到。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论