Anzeige
Tutorialbeschreibung

Webseiten zentrieren mit CSS

Webseiten zentrieren mit CSS

Es gibt bekanntlich viele Arten, Webseiten vertikal zu zentrieren. Neben anderen haben alle diese Methoden einen Nachteil gemeinsam - sie funktionieren nur, wenn die Höhe des zu zentrierenden Elementes bekannt ist und benötigen meist auch noch zusätzliches Markup.

Hier zeige ich euch, wie man eine Seite ohne diese Nachteile zentriert.


Webseiten horizontal zu zentrieren, ist einfach per margin:auto; möglich. Möchte man seine Seite auch vertikal zentrieren, wird's schon schwieriger. Es gibt ja einige Versuche im Netz, die das mehr oder minder gut schaffen, aber sie alle benötigen das Wissen über die Höhe der Seite. Aber Seiten lassen sich auch zentrieren, ohne dass man die Höhe kennt. So kann man dem Content überlassen, wie hoch die Seite ist. Gut für Menschen mit bspw. größer eingestellter Schrift im Browser, die würden nur noch einen zusätzlichen Scrollbalken bekommen (sofern der überhaupt vom Seitenersteller zugelassen ist).

Ich benutze hier bewusst HTML5-Elemente und -Doctype, um euch auch diese Sachen näher zu bringen. Des Weiteren funktioniert diese Methode im IE<=7 nicht mit div-Elementen, sodass man dort andere Elemente (span) "missbrauchen" müsste.

Ok, genug der Vorrede, let's do it ;)


Schritt 1

Als Erstes erstellen wir unser HTML-Grundgerüst und platzieren gleich noch ein paar Elemente auf der Seite.

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />

    <title>Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup</title>

    <meta name="description" content="Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup" />
    <meta name="author" content="cebito" />
    <meta name="keywords" content="vertikal, horizontal, Website,  zentriert, center, position, Markup" />

    <link rel="stylesheet" href="style.css" media="screen" />

</head>

<body>
<div class="wrap">
    <section class="centered">
        <header><h1>Webseite horizontal und vertikal zentrieren ohne Position und zusätzliches Markup*</h1></header>

        <nav>
            <ul>
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
                <li><a href="#">three</a></li>
                <li><a href="#">four</a></li>
                <li><a href="#">five</a></li>
            </ul>
        </nav>

        <article>
            <header><h2>ein Artikel</h2></header>

            <p>etwas Text</p>
            <p>noch mehr Text</p>
            <p>Lorem Ipsum</p>
            <p>blabla</p>

            <footer><p>gepostet am 00.00.00</p></footer>
        </article>

        <footer><p>* na ja, vielleicht ein bisschen für den IE &lt;= 7 ;)</p></footer>
    </section>
</div>

</body>
</html>


Ich habe hier zwei Klassen vergeben, über die wir die Seite zentrieren; diese können dann auch auf Elemente innerhalb der Seite angewandt werden, um diese in ihrem Elternelement zu zentrieren.


 

Schritt 2

Um die HTML-Elemente auch mit dem Internet Explorer 8 und kleiner nutzen zu können, müssen wir diese bekannt machen. Dafür notieren wir ein kleines Javascript vor dem schließenden head-Tag:

<script>
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('nav');
    document.createElement('article');
</script>


Wollt ihr noch mehr HTML-Elemente nutzen, müsst ihr diese ebenfalls bekannt machen.


Schritt 3

Wir legen die CSS-Datei an und notieren die üblichen Styles.

*{
    margin:0;
    padding:0;
}

html, body{
}
body{
    background:#999;
    font-size:100%;
}
header,footer,section,nav,article{
    display:block;
}
.wrap {
}
.centered {
    width: 880px;
    background:#eee;
    text-align:left;
}
header{
    border-bottom:1px solid #141414;
}
h1,h2,p{
    padding:5px 15px;
}
article{
    margin-left:150px;
    color:#000;
    background:#eee;
}
article header, article footer{
    text-align:left;
    border:none;
}
nav{
    float:left;
    width:150px;
}
ul{
    list-style:none;
}
li a{
    padding:2px 15px;
    color:#205287;
}
li a:hover{
    color:#A50808;
}
footer{
    border-top:1px solid #141414;
    font-size:.7em;
    text-align:right;
    clear:both;
}

So weit, so gut: Wir haben eine funktionierende "gestylte" Webseite; die klebt aber noch oben links in der Ecke fest.


 

Schritt 4

Wir nutzen die Eigenschaften von Inlineelementen, um die Seite zu zentrieren. Dazu benötigen wir noch ein zusätzliches Element, das wir mit :before erzeugen. Ändert die folgenden Styles so ab und ergänzt .wrap:before:

html, body{
    height:100%;
}
body{
    min-width:900px;
    background:#999;
    font-size:100%;
}
.
.
.
.wrap {
    text-align: center;
    height:100%;
}
.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 880px;
    background:#eee;
    text-align:left;
}


Wir haben das zusätzliche Element über die ganze Zeilenhöhe gespannt und durch das vertical-align erreicht, dass sich der andere container mittig einfügt. Das min-width für den body wird benötigt, damit bei zusammengeschobenem Fenster kein Zeilenumbruch entsteht.


 

Schritt 5

Das war's, oder? Nein, da gibt's ja noch den IE<8, der mit :before nichts anfangen kann. Ab 2012 führt Microsoft automatische Updates für den IE ein, sodass IE8 dann als Mindeststandard angesehen werden kann. Wer ältere IEs dennoch unterstützen möchte, fügt einfach am Ende zwischen </section> und </div> diesen HTML-Kommentar ein:

<!--[if lte IE 7]>
    <span class="ie7centered"> </span>
<![endif]-->
und ergänzt die CSS noch durch die passenden Styles:

.ie7centered{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}


Vollständiges HTML und CSS gibt's als Arbeitsmaterialien zum Download.

Das war's, bis zum nächsten,
cebito

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Hannelore Futzy
Portrait von herbstduft
  • 19.01.2014 - 23:37

Danke für das Tutorial. Werde es auf meiner neu entstehenden Homepage anwenden.

Portrait von EleaNor
  • 30.04.2013 - 15:02

Vielen dank, Sehr gutes Tutorial,
kann ich sehr gut gebrauchen ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.02.2013 - 15:46

Dankeschön für das Tutorial...

Portrait von ledavi
  • 12.02.2013 - 19:57

Danke für die Anleitung. Eigentlich eh gar nicht so schwer ... ;-)

Portrait von Deffi
  • 29.11.2012 - 13:33

Funktioniert super, vielen Dank!

Portrait von Gabster_Silence
  • 15.10.2012 - 13:01

Vielen Dank, war sehr einfach und verständlich beschrieben.

Portrait von ciba
  • 01.06.2012 - 19:44

sehr gutes Script, vielen Dank

Portrait von asteri
  • 09.05.2012 - 18:37

Vielen Dank für die verständliche Anleitung. Ich habe Schritt für Schritt nachgearbeitet und habe alles verstanden

Portrait von edaegelm
  • 01.02.2012 - 11:17

SUPER Besten Dank für die Anleitung

Portrait von pmsys
  • 27.01.2012 - 12:17

So etwas habe ich schon gesucht... Super!

Portrait von cwk4711
  • 13.01.2012 - 12:51

Sehr gutes Tutorial. Funktioniert mit den gängigen Browsern! Sogar meine Templates gehen einwandfrei. Glückwunsch!

Portrait von Posni
  • 10.01.2012 - 16:18

Vielen dank, kann ich sehr gut gebrauchen!

Portrait von Spearboy
  • 10.01.2012 - 14:28

Vielen Dank für dieses sehr übersichtlich gestaltete Tutorial!

x
×
×