垂直居中-父元素高度确定的多行文本

（方法一）

css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。

html代码：

 1 <body>
 2 <table><tbody><tr><td class="wrap">
 3 <div>
 4     <p>看我是否可以居中。</p>
 5     <p>看我是否可以居中。</p>
 6     <p>看我是否可以居中。</p>
 7     <p>看我是否可以居中。</p>
 8     <p>看我是否可以居中。</p>
 9 </div>
10 </td></tr></tbody></table>
11 </body>

css代码：

 1 table td{height:500px;background:#ccc} 

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以就不需要显式地设置了。

 

（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但IE6、7 并不支持这个样式。

html代码：

1 <div class="container">
2     <div>
3         <p>看我是否可以居中。</p>
4         <p>看我是否可以居中。</p>
5         <p>看我是否可以居中。</p>
6         <p>看我是否可以居中。</p>
7         <p>看我是否可以居中。</p>
8     </div>
9 </div>

css代码：

1 <style>
2 .container{
3     height:300px;
4     background:#ccc;
5     display:table-cell;/*IE8以上及Chrome、Firefox*/
6     vertical-align:middle;/*IE8以上及Chrome、Firefox*/
7 }
8 </style>

 

posted @ 2015-04-08 23:07  breakdinner  阅读(104)  评论(0)    收藏  举报