Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 我们如何使用显示:表格单元格?_Html_Css - Fatal编程技术网

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

Html 我们如何使用显示:表格单元格?,html,css,Html,Css,我有一个带float:right的div,没有声明position属性。这个div有一些文本内容,有时可能会被包装。我希望文本始终垂直居中。为此div声明display:table cell和vertical align:middle根本不起作用。有人能给我指一下关于桌子单元格的正确方向吗 我正在使用FF。这在IE中有效吗?如果声明display:table cell,则必须将其嵌套在元素中,并使用display:table row和display:table。就像一张真正的桌子 查看浏览器的兼

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

我正在使用FF。这在IE中有效吗?

如果声明display:table cell,则必须将其嵌套在元素中,并使用display:table row和display:table。就像一张真正的桌子

查看浏览器的兼容性。

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

查看浏览器的兼容性

这在IE中有效吗

IE6-7否。由于这个原因,表格显示值目前还不可用

像素开发人员对嵌套的看法是正确的。。。如果在表行元素之外有display:table cell元素,则结果呈现是未定义的,不同浏览器的行为将不同且随机

这在IE中有效吗

IE6-7否。由于这个原因,表格显示值目前还不可用


像素开发人员对嵌套的看法是正确的。。。如果在表行元素之外有一个display:table cell元素,则结果呈现是未定义的,不同浏览器的行为将不同且随机。

我无法为您提供一种使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:

它很脆弱,因为它不会根据尺寸自动缩放,所以看起来有点不完美。还要注意的是,我只测试了IE8,它需要不同的负余量

现场演示将在以下位置观看:

演示作品在以下设备上测试:

Ubuntu 9.10:Firefox 3.6,Chrome 5.0.307.11


Windows XP:Firefox 3.6,Chrome 4.0.249.89,IE 8

我无法为您提供一种显示方式:表格单元格;按照您希望的方式工作,但是假设您的要求是文本在其容器中垂直居中,我将为您提供一个解决方案,记住它相对脆弱

假设加价如下:

<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:

它很脆弱,因为它不会根据尺寸自动缩放,所以看起来有点不完美。还要注意的是,我只测试了IE8,它需要不同的负余量

现场演示将在以下位置观看:

演示作品在以下设备上测试:

Ubuntu 9.10:Firefox 3.6,Chrome 5.0.307.11


Windows XP:Firefox 3.6、Chrome 4.0.249.89、IE 8

尽管嵌套,垂直对齐仍不工作:有建议吗?尽管嵌套,垂直对齐仍不工作:有建议吗?现在嵌套正确,但垂直对齐:中间仍不工作:现在嵌套正确,但垂直对齐:中间仍不工作: