我们如何使用 display:table-cell？答案

【问题标题】：How do we use display:table-cell?我们如何使用 display:table-cell？
【发布时间】：2010-03-07 07:30:23
【问题描述】：

我有一个带有 float:right 的 div（没有声明位置属性）。这个 div 有一些文本内容，有时可能会被包装。我希望文本始终垂直居中。为这个 div 声明 display:table-cell 和 vertical-align:middle 根本不起作用。有人可以指出关于表格单元的正确方向吗？

我正在使用 FF。这可以在 IE 中使用吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果声明display:table-cell，则必须将其嵌套在具有display:table-row 和display:table 的元素中。就像一张真正的桌子。

查看Quirks Mode on Tables 了解浏览器的兼容性。

【讨论】：

现在嵌套正确，但垂直对齐：中间仍然无法正常工作:(

【解决方案2】：

这可以在 IE 中使用吗？

IE6-7 没有。由于这个原因，table 显示值今天还不能使用。

Pixel 开发人员对嵌套的看法是正确的...如果您在 table-row 元素之外有一个 display: table-cell 元素，则生成的渲染是未定义的，并且不同的浏览器会表现出不同的随机性。

【讨论】：

vertical-align 不工作，尽管嵌套 :( 有什么建议吗？

【解决方案3】：

我无法为您提供让 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 8）需要不同的负边距。

现场演示将在以下位置观看：http://www.davidrhysthomas.co.uk/so/verticalCentre.html。

演示工作（测试）：

Ubuntu 9.10： Firefox 3.6、Chrome 5.0.307.11

Windows XP： Firefox 3.6、Chrome 4.0.249.89、IE 8

【讨论】：