我們如何使用display：table-cell？

我有一個div與浮法：右（沒有位置屬性聲明）。這個div有一些文本內容有時可能被打包。我希望文本始終以垂直居中。聲明顯示：table-cell和vertical-align：middle這個div根本不起作用。有人可以指向我關於表格單元的正確方向嗎？我們如何使用display：table-cell？

我正在使用FF。這將在IE中工作嗎？

來源

2010-03-06 Kshitij Saxena -KJ-

如果你聲明display:table-cell那麼你必須將它嵌套在display:table-row和display:table的元素中。就像一個真正的桌子。

查看Quirks Mode on Tables查看兼容的瀏覽器是如何工作的。

來源

2010-03-06 20:05:03

嵌套正確現在，但垂直對齊：中間仍然不工作:( – 2010-03-06 20:11:36

請問這個工作在IE嗎？

IE6-7 no。由於這個原因，table顯示值今天還不能使用。

像素開發人員對嵌套是否正確...如果在table-row元素之外有display: table-cell元素，則結果呈現未定義，並且不同的瀏覽器將表現出不同且隨機的行爲。

來源

2010-03-06 20:08:23 bobince

垂直對齊不工作，儘管嵌套:(任何建議？ – 2010-03-06 20:11:04

我不能爲您提供讓display: table-cell;以您想要的方式工作的方式，但假設您的要求是讓文本在其容器中垂直居中，我會爲您提供解決方案（要記住它比較脆弱）。

假設下面的加價：

<div id="pageWrap"> 

    <h1>This is just filler text</h1> 

    <div id="floatedDiv"> 

     <p>This text should be vertically-centred within the parent div, in this case within the '<code>#floatedDiv</code>.'</p> 

    </div> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum metus ultricies lorem adipiscing malesuada. Morbi at nisl dolor. Praesent aliquet convallis ligula, sed auctor mauris lobortis eget. Aliquam venenatis ornare ligula, sit amet pretium erat dapibus eu. Nam rutrum tempor luctus. Sed interdum tempor urna sed bibendum. Donec volutpat pulvinar massa, sit amet laoreet odio ultrices eu. Phasellus in eros et sapien porta venenatis. Vivamus fringilla, lectus in commodo sodales, lorem ligula lobortis felis, et congue justo lectus eu enim. Pellentesque rutrum auctor cursus. Proin vitae blandit purus. Duis et mauris purus. Proin sit amet placerat leo. Phasellus eget eros velit, id luctus augue. Mauris lacus metus, accumsan auctor tempus sed, auctor vitae tellus. Nulla facilisi.</p> 

</div>

而CSS：

div#floatedDiv {float: right; 
     width: 50%; 
     clear: left; 
     height: 6em; 
     padding: 0.5em; 
     margin: 0 0 0.5em 1em; 
     border: 1px solid #ccc; 
     position: relative; 
     } 

div#floatedDiv p 
     {position: absolute; 
     top: 50%; 
     left: 1em; 
     right: 1em; 
     margin-top: -20%; 
     } 

<!--[if ie]> 
    div#floatedDiv p {margin-top: -10%; } 
<![end if]-->

這是脆弱的，因爲它不會根據尺寸自動縮放本身，因此它看起來有點不完美。還要注意ie ie（我只有IE 8才能測試）需要不同的負邊距。

現場演示可在以下網址查看：http://www.davidrhysthomas.co.uk/so/verticalCentre.html。

演示作品（測試）上：

Ubuntu 9.10的：火狐3.6，Chrome瀏覽器5.0.307.11

Windows XP中：火狐3.6，Chrome瀏覽器4.0.249.89，IE 8

來源

2010-03-06 23:30:23

我們如何使用display：table-cell？

回答

相關問題