Seiteninhalt zentrieren

Ausgangsbasis: Gleich hohe Spalten mit CSS.

Seiteninhalte werden in den Browser mit verschiedenen Verfahren zentriert, abhängig von der CSS-Unterstützung der Browser.

Grundlegender Code

Quelltext

<div style="display:table; margin: auto">
    <div style="display:table-cell; background: #ccf; width: 150px">
    Spalte 1
    </div>
    <div style="display:table-cell; background: #eee; width: 300px">
    Spalte 2<br />mit weiterem Inhalt
    </div>
    <div style="display:table-cell; background: #ccf; width: 150px">
    Spalte 3
    </div>
</div>

Vorschau

Spalte 1

Spalte 2
mit weiterem Inhalt

Spalte 3

Ergänzung für den Internet Explorer und ältere Browser

Der Internet Explorer kennt die CSS-Eigenschaft margin: auto nicht. Darum muss das Element in einem Elternelement zentriert werden. Da text-align nach dem Standard nicht einem DIV-Container zugewiesen werden kann, ignorieren Firefox, Opera und andere diese Einstellung. Es müssen also immer beide Eigenschaften angegeben werden.

Auf das erste DIV-Element (mit text-align: center) kann verzichtet werden, wenn text-align: center BODY zugewiesen ist.

Quelltext im Dokumentenkopf (Javascript und CSS)

<!--[if lt IE 8]>
<style type="text/css">
#a1, #a2, #a3 {
float: left;
}
</style>

<script type="text/javascript">
function layout_colheight()
{
    var h = document.getElementById("a").scrollHeight;
    document.getElementById("a1").style.height = h+'px';
    document.getElementById("a2").style.height = h+'px';
    document.getElementById("a3").style.height = h+'px';
}

window.onload = layout_colheight;
</script>
<![endif]-->

Quelltext

<div style="text-align: center">
    <div id="a" style="display:table; margin: auto; text-align: left">
        <div id="a1" style="display:table-cell; background: #ccf; width: 150px">
        Spalte 1
        </div>
        <div id="a2" style="display:table-cell; background: #eee; width: 300px">
        Spalte 2<br />mit weiterem Inhalt
        </div>
        <div id="a3" style="display:table-cell; background: #ccf; width: 150px">
        Spalte 3
        </div>
    </div>
</div>

Spalte 1

Spalte 2
mit weiterem Inhalt

Spalte 3