display:table-cell的用法簡介:
display屬性的使用相當頻繁，比如display:block或者display:inline等，但是對於display:table-cell可能比較陌生，因為此屬性在特定的情況下會發揮很大的作用，下面就簡單介紹它的作用，先看一段代碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>螞蟻部落</title> <style type="text/css"> .parent{ width:600px; height:600px; background-color:green; vertical-align:middle; } .children{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
在以上代碼中，盡管給父div添加了vertical-align:middle，但是子div還是不能夠垂直居中。下面改造一下代碼:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>螞蟻部落</title> <style type="text/css"> .parent{ width:600px; height:600px; background-color:green; display:table-cell; vertical-align:middle; } .children{ width:100px; height:100px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
以上代碼的表現可以看出，添加display:table-cell之后，子div在父div中實現了垂直居中效果，不過需要注意的是，在IE6和 IE7這樣低版本的瀏覽器中無效。這里可以引出display:table-cell的作用，它可以指定對象作為表格單元格，類同於html標 簽<td>，也就是說它可以使對象具有表格單元格的屬性，所以在第二個實例中，添加了display:table-cell屬性之后，div 就具有了valign屬性，於是vertical-align:middle也就生效了。