Lerne, wie du eine Website mithilfe von HTML und CSS zentriert ausrichtest.

Grafische Darstellung der Zentrierung des Inhalts einer Website

Das korrekte Layouten von Web-Seiten mit HTML und CSS wird auch in den Tutorials Mit HTML-Layouts arbeiten und Web-Seiten mit CSS layouten behandelt.

Layout einer Website, das im Browser-Fenster zentriert angezeigt wird. Oben die Vorher-Version, unten die Nachher-Version

Beim Erstellen einer Web-Seite werden Inhalte standardmäßig linksbündig gesetzt. In vielen Fällen ist aber ein zentriertes Layout ansprechender und bringt das Design besser zur Geltung. Das erreichst du, indem du die Seite per HTML übersichtlich strukturierst und die Inhalte anschließend mittels CSS zentrierst.

Die Schaltflächen oben im Dateifenster ermöglichen den Wechsel zwischen HTML-Quellcode und dem verknüpften CSS-Stylesheet.

Vorbereitung.

Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne die Datei center-website.html in Dreamweaver. Zeige den Quellcode in der Ansicht „Teilen“ an.

Im Modus „Teilen“ wird der Quellcode angezeigt.

DIV-Wrapper erstellen.

Füge <div>-Tags vor und nach dem Inhalt des <body>-Tags hinzu. Da die DIV-Tags den Inhalt umschließen (engl. „to wrap“), gib für das DIV-Element die ID wrapper ein. Vergiss das schließende </div>-Tag nicht.

Die Erstellung eines DIV-Tags um den gesamten Seiteninhalt erleichtert die Anwendung von CSS-Eigenschaften auf die ganze Seite. In diesem Beispiel werden sämtliche Inhalte per CSS zentriert.

HTML.

<div id="wrapper">
(Inhalt)
</div>

Erstellen des DIV-Elements „Wrapper“ im HTML-Quellcode

Ränder per CSS festlegen.

Öffne die Datei style.css. Suche den Abschnitt, der mit dem Kommentar „/* Start Here */“ beginnt.

Rufe das Menü Ansicht auf. Deaktiviere „Vertikal teilen“. Die Ansichten „Code“ und „Live“ werden nun übereinander angezeigt. So lässt sich leichter erkennen, wie der Inhalt zentriert wird.

Füge die Eigenschaft margin: zum Selektor #wrapper hinzu. Dieser Selektor entspricht der ID des DIV-Elements im HTML-Code.

Für die Eigenschaft „margin“ sind vier Werte für die vier Seiten eines Elements zulässig: „top“, „right“, „bottom“ und „left“. Der komplette CSS-Code würde wie folgt aussehen: margin:0 auto 0 auto;  Da aber die Werte für „top“ und „bottom“ und die Werte für „left“ und „right“ jeweils gleich sind, kannst du die Schreibweise abkürzen:

margin: 0 auto;

Die Werte für den oberen und unteren Rand sind jeweils 0, da weder vor noch nach dem Inhalt zusätzlicher Platz gebraucht wird. Der linke und der rechte Rand sind jeweils auf den Wert auto gesetzt. Dadurch wird der verfügbare Platz gleichmäßig zwischen diesen beiden Rändern verteilt. Damit ist das Layout zentriert.

CSS.

#wrapper {
    ...
    margin: 0 auto;
}

Über die Option „Vorschau in Google Chrome“ lässt sich die Anzeige im Browser überprüfen.

Klicke auf Vorschau in Browser. Überprüfe das zentrierte Layout in deinem bevorzugten Webbrowser.

Speichere die Datei, damit deine Änderungen angezeigt werden.

Adobe-Logo

Bei Ihrem Konto anmelden