Lernen Sie, wie Sie eine Website mithilfe von HTML und CSS zentriert ausrichten.
Website-Inhalte zentrieren

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.

Website-Inhalte zentrieren

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 erreichen Sie, indem Sie die Seite per HTML übersichtlich strukturieren und die Inhalte anschließend mittels CSS zentrieren.

Datei „center-website.html“ öffnen

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie die Datei center-website.html in Dreamweaver, und zeigen Sie den Quell-Code in der Ansicht „Teilen“ an.

DIV-Wrapper erstellen

DIV-Wrapper erstellen

Fügen Sie <div>-Tags vor und nach dem Inhalt des <body>-Tags hinzu. Da die DIV-Tags den Inhalt umschließen (engl. „to wrap“), geben Sie für das DIV-Element die ID wrapper ein. Vergessen Sie 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>

Ränder per CSS festlegen

Ränder per CSS festlegen

Öffnen Sie die Datei style.css, und suchen Sie den Abschnitt, der mit dem Kommentar „/* Start Here */“ beginnt.

Rufen Sie das Menü Ansicht auf, und deaktivieren Sie Vertikal teilen. Code- und Live-Ansicht werden nun übereinander angezeigt. So lässt sich leichter erkennen, wie der Inhalt zentriert wird.

Fügen Sie 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, können Sie 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;
}

Vorschau in Browser

Fertig!

Klicken Sie auf Vorschau in Browser, und überprüfen Sie das zentrierte Layout in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

04/13/2018
War diese Seite hilfreich?