CSS - 將過大的div放在表格單元內太小

Question

我想在表格單元格內顯示一個DIV，因爲它對它來說太窄了。我正在使用overflow：hidden來允許div泄漏表格單元格的一側，但現在我想將它居中以便它的兩側溢出一點點，而且一邊是很多的一邊。

如何在DIV內對DIV過窄的DIV內水平居中？

Answer 1

如果你的佈局是固定的，你總是可以絕對定位你的div例如

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

，或者如果在div需要是相對於表格單元格的當前位置：

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

還有top，right和bottom CSS用於定位屬性。根據所需的方向，這些可以是正數或負數。

Answer 2

讓你的div具有內部的div：

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

然後申請一個50％的保證金，留給div.outer和負50％的保證金，留給div.inner。這應該將div完全居中放置在單元格中水平居中。

理念：

讓我們想象的表格單元格是20像素寬，div的是廣泛的22px。表格單元格中的div.outer左邊緣將被推到10的像素位置。然後用-50％的邊距div.inner將被拉回到左邊的11個像素，將它定位在表格單元左邊的一個像素之外，並固有地溢出右邊的1個像素。