div垂直对齐

于 2008-02-25 11:14:46 发布 · 144 阅读

文章标签：

#IE #浏览器 #HTML

javascript 专栏收录该内容

2 篇文章

订阅专栏

今天在调试页面的时候发现div不支持vertical-align。查找了一下，可以通过下面解决。


  <div style="display: table; height: 300px; width: 300px; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

以下划线开头的属性是ie/Win特有的支持的，在其他浏览器里会忽略掉。这样就可以针对ie/Win设计特别的样式。