центрирование абсолютного div горизонтально в относительной ячейке таблицы

У меня есть таблица с ячейками таблицы. В этих ячейках таблицы я хочу отобразить абсолютный позиционированный div. У div есть фиксированный верх и низ, и я хочу, чтобы он отображался в центре ячейки таблицы. Вот мой код до сих пор:центрирование абсолютного div горизонтально в относительной ячейке таблицы

table { 
 
    width: 100%; 
 
    border: 1px solid; 
 
    height: 200px; 
 
    table-layout: fixed; 
 
} 
 
table td { 
 
    position: relative; 
 
    border: 1px solid 
 
} 
 
div { 
 
    position: absolute; 
 
    top: 20%; 
 
    bottom: 30%; 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    width: 90%; 
 
    margin: auto; 
 
}

<html> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div>Content</div> 
 
    </td> 
 
    <td>&nbsp;</td> 
 
</table> 
 

 
</html>

Я установил маржу авто, надеясь, что это будет центрирования DIV, но это не так. Из-за других требований, как должна выглядеть страница, я должен включить в нее табличный макет, и я не могу установить ширину td.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

источник

2015-03-13 user4493177

DIV должен быть установлен абсолютно? – j08691

Если это 90% широкий, то почему бы просто не сосредоточить его, добавив 'left: 5%' ...? – CBroe

Поскольку вы дали абсолютно позиционированный элемент шириной, вам просто нужно добавить left: 0; right: 0;, чтобы центрировать его по горизонтали.

В качестве альтернативы, поскольку элемент имеет фиксированную процентную ширину 90%, вы также можете просто использовать left: 5%, чтобы центрировать его по горизонтали.

table { 
 
    width: 100%; 
 
    border: 1px solid; 
 
    height: 200px; 
 
    table-layout: fixed; 
 
} 
 
table td { 
 
    position: relative; 
 
    border: 1px solid 
 
} 
 
div { 
 
    position: absolute; 
 
    top: 20%; 
 
    bottom: 30%; 
 
    left: 0; right: 0; 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    width: 90%; 
 
    margin: auto; 
 
}

<html> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <div>Content</div> 
 
    </td> 
 
    <td>&nbsp;</td> 
 
</table> 
 

 
</html>

источник

2015-03-13 00:09:39

центрирование абсолютного div горизонтально в относительной ячейке таблицы

ответ

Смежные вопросы