CSS - Come centrale orizzontalmente La tabella chi è la posizione è assoluta

Question

Ho un 5 HTML pagine con lo stesso codice. Dì che questo è il codice:

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

Tutte le 5 pagine si collegano allo stesso file CSS esterno che è proprio questo:

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

Su ciascuna delle 5 pagine, ho inserito un tavolo, così

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

La tabella ha solo una riga. In una riga, devo scegliere un numero casuale da 1 a 10, ed è quanti TD la riga avrà. Quindi la prima pagina HTML può avere 2 TD, la seconda può avere 6TD, ecc. Devo farlo in modo che la posizione verticale del tavolo sia la stessa in tutte le pagine, ma la tabella deve essere allineata orizzontalmente. Devo usare la posizione in assoluto poiché altri utenti potrebbero digitare alcuni paragrafi prima della tabella su alcune pagine e su alcune pagine potrebbero non esserci paragrafi aggiuntivi, quindi per farmi avere la stessa posizione verticale della tabella, ho bisogno posizione assoluta. Come faccio a farlo in modo che ogni tavolo sia centrato in orizzontale? Per orizzontale allineato, intendo che ogni tavolo ha una quantità pari di spazio bianco a sinistra e sulla destra, indipendentemente da quanti TD ha il tavolo.

margin: 0 auto;

Non funziona per me. Nota che non sto usando CSS3 e sto usando IE8.

Answer 1

margin: 0 auto Non funzionerà per elementi assoluti posizionati. Quello che devi fare è posizionarlo assoluto nel mezzo. Lo fai spostandolo lasciato il 50%; e quindi regolato il margine sinistro alla metà negativa della larghezza degli elementi

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

Questo lo cenirà nel mezzo del suo genitore

ps. Assicurati che la posizione dei contenitori dei genitori sia impostata su un parente

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