代码之家 › 专栏 › 技术社区 › KJ Saxena

如何使用显示:表格单元格?

css html

KJ Saxena · 技术社区 · 16 年前

我有一个带float:right的div(没有声明position属性)。这个div有一些文本内容,有时可能会被包装。我希望文本始终垂直居中。为此div声明display:table cell和vertical align:middle根本不起作用。有人能给我指一下关于桌上电池的正确方向吗?

3 回复 | 直到 16 年前

The Pixel Developer 16 年前

如果你申报 display:table-cell 然后你必须用 display:table-row display:table . 就像一张真正的桌子。

退房 Quirks Mode on Tables 查看浏览器的兼容性。

bobince 16 年前

这在IE里行吗?

table 由于这个原因,显示值现在还不可用。

像素开发者对嵌套的看法是正确的。。。如果你有 display: table-cell 元素位于 table-row 元素的结果呈现是未定义的,不同的浏览器将表现出不同的随机行为。

David Thomas 16 年前

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(我只测试了ie8)需要不同的负边距。

http://www.davidrhysthomas.co.uk/so/verticalCentre.html .

演示作品(已测试):

Ubuntu 9.10版本:

Firefox 3.6、Chrome 4.0.249.89、IE 8