CSS - 在一个太小的表格单元格中居中一个超大的 div答案

【问题标题】：CSS - center an oversized div inside a table cell which is too smallCSS - 在一个太小的表格单元格中居中一个超大的 div
【发布时间】：2010-05-15 03:57:33
【问题描述】：

我想在一个太窄的表格单元格中显示一个 DIV。我正在使用 overflow:hidden 来允许 div 溢出表格单元格的一侧，但现在我想将它居中，以便它在两侧溢出一点点而不是在一侧溢出。

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

【问题讨论】：

标签： html css

【解决方案1】：

让你的 div 有一个内部 div：

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

然后对 div.outer 应用 50% margin-left 和对 div.inner 应用负 50% margin-left。这应该使 div 在单元格中完全水平居中。

概念：

假设表格单元格是 20px 宽，而 div 是 22px 宽。盒子的 div.outer 左边缘将被推到表格单元格内的 10 像素位置。然后以 -50% 的边距将 div.inner 向左拉回 11 个像素，将其定位在表格单元格左侧的一个像素之外，并在右侧自然溢出 1 个像素。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

谢谢，这主要是可行的 - 我并不总是确定我能保证孩子 DIV 的大小，所以我真正想要的是居中
那我不太确定。如果您需要类似的动态，您可以尝试在页面加载后执行一些 jQuery，并使用 JavaScript onLoad 事件直接应用一些自定义样式来执行 div？不过不太确定这种方法是否可行。