CSS - como a mesa central horizontalmente cuja posição é absoluta

Question

Eu tenho 5 páginas HTML com o mesmo código. Diga este é o código:

<div id='generic'>
</div>

Todas as 5 páginas vinculam ao mesmo arquivo CSS externo, que é apenas isso:

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

Em cada uma das 5 páginas, inseri uma mesa, como assim

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

A tabela tem apenas uma linha. Na única linha, preciso escolher um número aleatório de 1 a 10, e é assim que a linha de TD tem. Portanto, a primeira página HTML pode ter 2 TDs, a segunda pode ter 6TDs, etc. Preciso fazê -lo para que a posição vertical da tabela seja a mesma em todas as páginas, mas a tabela deve estar alinhada horizontalmente. Eu tenho que usar a posição absoluta, pois outros usuários podem digitar alguns parágrafos antes da tabela em algumas páginas e em algumas páginas, pode não haver parágrafos adicionais, então, para que eu tenha a mesma posição vertical da tabela, preciso posição absoluta. Como faço para que todas as mesas sejam centralizadas horizontalmente? Por alinhado horizontalmente, quero dizer que toda mesa tem uma quantidade uniforme de espaço em branco à esquerda e à direita, independentemente de quantos TD a tabela tem.

margin: 0 auto;

não funciona para mim. Observe que não estou usando CSS3 e estou usando o IE8.

Answer 1

margin: 0 auto não funcionará para elementos posicionados absolutos. O que você precisa fazer é a posição absoluta no meio. Você consegue isso movendo -o deixando 50%; e depois ajustou a margem esquerda para metade negativa da largura dos elementos

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

Isso vai centralizá -lo no meio de seus pais

ps. Verifique se a posição dos contêineres dos pais está definida como relativa

http://jsfiddle.net/s7gmm/3/