CSS - центрируйте слишком большой div внутри слишком маленькой ячейки таблицы

Question

Я хочу отобразить DIV внутри ячейки таблицы, которая слишком узка для него. Я использую переполнение: скрытый, чтобы div мог пролить одну сторону ячейки таблицы, но теперь я хочу центрировать его так, чтобы он пролил крошечный бит с обеих сторон, а не много на одной стороне.

Как мне горизонтально центрировать DIV внутри TD, который слишком узок для DIV?

Answer 1

сделайте так, чтобы ваш div имел внутренний div:

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

Затем примените 50% поля слева к div.outer и отрицательное поле 50% слева к div.inner. Это должно расположить div точно по центру по горизонтали в ячейке.

Концепция:

давайте представим, что ячейка таблицы имеет ширину 20 пикселей, а элементы div имеют ширину 22 пикселя. левый край блока div будет перемещен на позицию пикселя 10 в ячейке таблицы. Затем с -50% запасом div.inner будет перемещен назад влево на 11 пикселей, расположив его на один пиксель снаружи слева от ячейки таблицы и по сути переполнив 1 пиксель справа.

Answer 2

Если ваш макет фиксирован, вы всегда можете абсолютно точно расположить ваш div, например,

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

или если div должен быть относительно текущей позиции ячейки таблицы:

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

Для позиционирования также есть атрибуты top, right и bottom css.Это может быть положительное или отрицательное число в зависимости от необходимого направления.