我有一个带浮点数的div:right(没有声明位置属性)。这个div有一些文本内容,有时可能会被包装。我希望文本始终垂直居中。声明显示:table-cell和vertical-align:这个div的中间根本不起作用。有人能指出我关于table-cell的正确方向吗?
我正在使用FF。这会在IE中运行吗?
答案 0 :(得分:5)
如果您声明display:table-cell
,则必须将其嵌套在包含display:table-row
和display:table
的元素中。就像真正的桌子一样。
查看Quirks Mode on Tables以查看兼容的浏览器。
答案 1 :(得分:1)
这会在IE中运行吗?
IE6-7没有。由于这个原因,今天table
显示值尚不可用。
Pixel Developer对于嵌套是正确的...如果display: table-cell
元素之外有table-row
元素,则生成的渲染是未定义的,不同的浏览器将以不同的方式随机运行。
答案 2 :(得分:1)
我无法为您提供一种让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