Question

所以我有一个包含两个单元格的表格，我想将一个元素放在一个单元格的中心。它在Chrome中可以正常运行，但在IE或Firefox中却无法运行。知道为什么会这样吗？我怎样才能让它跨浏览器工作？

似乎在Firefox中左侧属性不正确，它不是位于父块而是位于整个文档。在IE中，top属性不起作用。

<table style="height:500px;width:500px;table-layout:fixed">
   <tr>
    <td class='div'>
        <span id='divElement'>
      We are launching soon!!!!
        </span>
    </td>
    <td style="background-color:red">
    </td>
   </tr>
</table>
#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

.div{
    position: relative;
    background-color: yellow;
}

更新

我没有使用vertical-align：center的原因是因为我真正想做的事实上不仅仅是把它放在中心位置。

所以我将一个元素放置在中心位置，并希望将两个元素放置在该居中元素旁边的固定偏移处，每边一个。而且我希望即使窗口大小发生变化也能修复偏移量。（该表占用100％的窗口，每个td需要50％，所以当窗口大小改变时td大小也会改变）

我提出的方法是使用绝对定位并首先将两个元素放在中心，然后使用边距将它们推到居中元素的[width / 2 + fixOffset]

也许还有更好的方法吗？

New JSFiddle example

Answer 1

为什么，哦为什么你会使用绝对定位......？

您已经在表格单元格中 - text-align和vertical-align可以完美地用于居中内联内容：

.div{
    background-color: yellow;
    text-align:center;
    vertical-align:middle;
}

#divElement{
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

http://jsfiddle.net/828YG/3/

Answer 2

请参阅问题：Using Position Relative/Absolute within a TD?

基本上是因为position: relative在表格单元格元素（td或任何display: table-cell）上有未定义的行为，这意味着每个浏览器都按照自己的意愿实现它，没有规则。

因此，在某些情况下，它可能有用（见chrome），但在其他情况下则无效。

自己解决同样的问题。并最终使用div，因为我真的需要相对于容器定位的子元素，在它之外。

如果您只需要将内容置于中心位置，请使用vertical-align: middle代替position: absolute - top: 50% - margin-top: -somepx组合

请参阅已编辑的fiddle

CSS Left和Top在chrome，firefox和IE中的表现不同

2 个答案: