CSS - 将一个超大的div放在一个太小的表格单元格中

Question

我想在表格单元格中显示一个DIV，它太窄了。我正在使用溢出：隐藏以允许div溢出表格单元格的一侧，但现在我想将它居中，以便它在两侧溢出一点点，并且在一侧很多。

如何将DIV水平居中在一个对DIV来说太窄的TD中？

Answer 1

让你的div有一个内在的div：

<td><div class="outer">
    <div class="inner></div>
</div></td> <!--close cell>

然后将50％的余量留给div.outer，将50％的负余量留给div.inner。这应该将div完全水平放置在单元格中。

概念：

让我们假设表格单元格宽20px，div宽22px。该框的div.outer左边缘将被推到表格单元格内的像素位置10。然后使用-50％边距div.inner将被拉回到左边的11个像素，将其定位在表格单元格左侧的一个像素内，并且固有地溢出右边的1个像素。

Answer 2

如果你的布局是固定的，你总是可以绝对定位你的div。

#myDiv
{
    position: absolute;
    left: 20px;
}

或者div是否需要相对于表格单元格的当前位置：

#myDiv
{
    position: relative;
    left: 20px;
}

还有top，right和bottom css属性用于定位。这些可以是基于所需方向的正数或负数。