CSS - Wie man horizontal im Mittelpunkt steht, welche Position absolut ist

Question

Ich habe 5 HTML -Seiten mit demselben Code. Sagen Sie, dies ist der Code:

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

Alle 5 Seiten verlinken mit derselben externen CSS -Datei, die nur Folgendes ist:

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

Auf jedem der 5 Seiten habe ich so ein Tisch eingefügt, so

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

Die Tabelle hat nur eine Zeile. In der einen Reihe muss ich eine zufällige Zahl von 1 bis 10 auswählen, und so viele TDs wird die Zeile haben. Die erste HTML -Seite kann also 2 TDs haben, die zweite kann 6TDs usw. haben. Ich muss es so erstellen, dass die vertikale Position der Tabelle auf allen Seiten gleich ist, aber die Tabelle muss horizontal ausgerichtet sein. Ich muss die Position von Position absolut verwenden, da andere Benutzer möglicherweise ein paar Absätze vor der Tabelle auf einigen Seiten eingeben, und auf einigen Seiten gibt es möglicherweise keine zusätzlichen Absätze, damit ich die gleiche vertikale Position der Tabelle habe. Position absolut. Wie mache ich es so, dass jeder Tisch horizontal zentriert ist? Mit horizontal ausgerichteter Ausrichtung meine ich, dass jeder Tisch eine gleichmäßige Menge an Weißraum links und rechts hat, unabhängig davon, wie viele TDs der Tisch hat.

margin: 0 auto;

Funktioniert nicht für mich. Beachten Sie, dass ich CSS3 nicht verwende und IE8 verwende.

Answer 1

margin: 0 auto funktioniert nicht für absolute positionierte Elemente. Was Sie tun müssen, ist die absolute Position in der Mitte. Sie erreichen dies, indem Sie es zu 50%bewegten. und stellte dann den linken Rand an die negative Hälfte der Elementbreite ein

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

Dies wird es in der Mitte seines Elternteils zentrieren

ps. Stellen Sie sicher, dass die Position der Eltern Container auf relativ eingestellt ist

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