7x bewertet

Div zentrieren

von Nekoji  |  03.04.2008 um 11:49 h
CSS Grundlagen
Typ: CSS Grundlagen
Stufe:Einfach Mittelmäßig
Das folgende Tutorial ist eine wichtige Grundlage, die euch beim Programmieren von Webseiten sehr nützlich sein wird.

Ich erkläre euch hier, wie ihr ein Div-Element so platzieren könnt, dass es in jedem Browser und mit jeder Auflösung mittig dargestellt wird, so wie hier: Klick!

Das hilft euch später, ganze Layouts mittig zu platzieren, wie z.B. auch bei Giatu.

Fangen wir erstmal mit unserem HTML-Code an:

<html>
<head>
<title>Div zentrieren - Giatu Tutorials</title>
</head>
<body>

<div id="layout">text</div>

</body>
</html>

Wir haben also ein Div Element in unserem Dokument, in dem irgendein beliebiger Text steht (kann auch leer sein oder andere Divs enthalten).

Nun beginnen wir das ganze mit CSS zu formatieren:

body
{
background-color: #DCDCDC;
font-family: Verdana, sans-serif;
color: #7D7D7D;
font-size: 11px;
line-height: 1.5em;
}

#layout
{
margin: auto; // wichtig!
padding: 10px;
text-align: left;
width: 350px;
background-color: #FFFFFF;
}

Im Teil "body" wird wie üblich Hintergrundfarbe, Textform, -farbe und -größe so wie der Zeilenabstand festgelegt.

Bei "#layout" wird unser Div Element formatiert. Das "padding" gibt den Abstand nach innen an, das "text-align:left;" sorgt dafür, dass unser Text linksbündig ist und auch hier werden wieder Hintergrundfarbe und Breite angegeben. Der entscheidende Teil, um unser Element zu zentrieren, ist hierbei das margin: auto;. Es sorgt dafür, dass sich das Element horizontal mittig platziert.

Wenn wir uns nun aber unser Zwischenergebnis in den verschiedenen Browser anschauen, merken wir schnell, dass der gute alte Internet Explorer mal wieder Probleme macht. Also braucht er mal wieder eine Extrawurst! ;)

body
{
background-color: #DCDCDC;
font-family: Verdana, sans-serif;
color: #7D7D7D;
font-size: 11px;
line-height: 1.5em;
text-align: center; // Extrawurst für den IE!
}

#layout
{
margin: auto;
padding: 10px;
text-align: left;
width: 350px;
background-color: #FFFFFF;
}

Ich habe in den "body" Teil nun ein text-align: center; eingefügt, was dafür sorgt, dass auch im IE unser Element zentriert wird. Achtet aber darauf, dass ihr in den Elementen selber das "text-align" wieder auf "left" setzt, sonst ist euer Text ebenfalls zentriert.

Und das wars auch schon wieder!



6 Kommentare




Fr34k

Das ist toll, ich wusste nicht, dass das mit Divs auch geht und hab deshalb immer mit Tabellen gearbeitet! Super Tut, 6 Sternchen :) juhu jetzt kann ich ganz neue Layouts gestalten, da ich sie ja mit Div coden kann :) Super vielen Dank^^
am 03.04.2008 um 12:04 Uhr


Nekoji

Freut mich, dass es hilfreich ist! :)
am 03.04.2008 um 12:05 Uhr


Pham

Oh vielen DANK!!!
Jetzt kann ich auch endlich Divs machen, die für alle Browser optimiert sind ^^ !!!

Wer niemals auf die Idee gekommen im Body und im Div text-align einzusetzen...
am 03.04.2008 um 16:38 Uhr


col

Sehr schönes Tut! Danke schön! 6 Sterne!
am 03.04.2008 um 16:56 Uhr


aah super =D
Ich war gestern gerade noch am Verzweifeln, weil sich mein Div im IE nich zentrieren lassen hat!
Super Tut, hat mir wirklich geholfen, danke Smilie
am 04.04.2008 um 11:52 Uhr


kannte ich schon, ist aber sehr hilfreich für die, die es noch nicht wissen. ich hab nämlich ewig rumprobiert.
am 06.04.2008 um 15:15 Uhr