首頁 > 開發者 > JavaScript
display:table-cell的用法簡介，displaytable-cell
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.softwhy.com/" /><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.softwhy.com/" /><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也就生效了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4607
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
