CSS - Comment centrer horizontalement la table de la position est absolue

Question

J'ai 5 pages HTML avec le même code. Dites que c'est le code:

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

Toutes les 5 pages sont liées au même fichier CSS externe qui est juste le suivant:

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

Sur chacune des 5 pages, j'ai inséré une table, comme ainsi

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

Le tableau n'a qu'une seule ligne. Dans la ligne, je dois choisir un nombre aléatoire de 1 à 10, et c'est le nombre de TD que la ligne va avoir. Ainsi, la première page HTML peut avoir 2 TD, la seconde peut avoir 6TD, etc. Je dois faire en sorte que la position verticale de la table soit la même sur toutes les pages, mais la table doit être alignée horizontalement. Je dois utiliser la position absolue car les autres utilisateurs peuvent taper quelques paragraphes avant le tableau sur certaines pages, et sur certaines pages, il pourrait ne pas y avoir de paragraphes supplémentaires, donc pour que j'aie la même position verticale du tableau, j'ai besoin position absolue. Comment puis-je faire en sorte que chaque table soit centrée horizontalement? En alignant horizontalement, je veux dire que chaque table a une quantité uniforme d'espace blanc à gauche et à droite, quel que soit le nombre de TD la table.

margin: 0 auto;

ne fonctionne pas pour moi. Notez que je n'utilise pas CSS3 et que j'utilise IE8.

Answer 1

margin: 0 auto ne fonctionnera pas pour des éléments positionnés absolus. Ce que vous devez faire, c'est la position absolue au milieu. Vous accomplissez cela en le déplaçant à 50%; puis ajusté la marge gauche à la moitié négative de la largeur des éléments

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

Cela le centra au milieu de son parent

Ps. Assurez-vous que la position des conteneurs parents est définie sur relative

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