Zur Navigation

<div>-Layer in CSS zentrieren

1 Jörg Kruse

In CSS gibt es zum Zentrieren das Attribut text-align - mit diesem kann man zwar Texte, allerdings im Gegensatz zum HTML-Attribut align (align="center") keine <div> Layer zentrieren

<div style="text-align:center">
<div>Layer, der nur im Internet Explorer zentriert wird</div>
</div>

nur der Internet Explorer zentriert dann den inneren Layer, Firefox und Opera jedoch nicht; für diese Browser muss der innere Layer noch mit einem margin:auto definiert werden:

<div style="text-align:center">
<div style="margin:auto">Layer, der auch in Firefox und Opera zentriert wird</div>
</div>

08.01.2005 16:34 | geändert: 08.01.2005 16:36

2 Brise

Hi Jörg,

Für den inneren (zentrierten) Layer sollte ebenfalls ein text-align definiert werden. Ausser man möchte wirklich zentrierten Text setzen. 
<div style="text-align:center">
<div style="margin:auto;text-align:left">Layer, der auch in Firefox und Opera zentriert wird. Der Text wird aber trotzdem linksbündig ausgerichtet.</div>
</div>

Das Problem hat mir auch schon einige Kopfschmerzen bereitet. ;)

Viele Grüße
Brise

08.01.2005 17:16

3 Jörg Kruse

Ja, die Textausrichtung, die vom äußeren Layer auf den inneren vererbt wird, muss natürlich noch überschrieben werden, danke für den ergänzenden Hinweis :)

soweit ich mich erinner, hatte ich an dem Problem auch so einige Zeit verzweifelt, bevor ich die Lösung dafür hatte

08.01.2005 17:39

4 chorn

man kann sich das text-align auch sparen und einen stricten doctype verwenden - dann klappts auch mitm IE. ausserdem stellen opera/FF hier nicht die ausnahme - margin:auto ist das einzig richtige und sollte zuerst genannt werden. imho.

11.01.2005 15:16

5 Jörg Kruse

Ja, du hast recht, das ist bei mir nicht deutlich genug bzw. missverständlich rübergekommen: der Internet Explorer verhält sich falsch, wenn er mit text-align einen Layer zentriert, dies ist nur für das Zentrieren von Inline-Elementen gedacht (deswegen auch text-align).

Dass der IE bei strictem Doctype sich richtig verhält, war mir gar nicht bewusst, ich hatte das noch an einer Testseite in HTML 4.01 transitional getestet, danke für diesen ergänzenden Hinweis :) Wie ist das aber mit dem IE 5, wird der auch ohne ein text-align:center auskommen?

Edit:

grad getestet: der IE 6 zentriert, wie von HoRnominatoR beschrieben, bei strictem XHTML den Layer standardkonfoerm mit margin:auto, der IE 5 benötigt ein text-align:center im übergeordneten Layer

11.01.2005 15:45 | geändert: 11.01.2005 15:53

6 chorn

ich hab das damals auch nur zufaellig bei irgendnem test von mir gesehen und war geschockt. eine halbe stunde danach hatte ich dann akzeptiert, dass es wirklich moeglich sein koennte. aber seitdem nimmt es mir viel arbeit ab... glaub ich zumindest.

11.01.2005 18:54

7 Brise

Auch von mir Danke, für den Hinweis mit dem stricten Doctype. Ein Grund mehr ihn einzusetzen.

Viele Grüße

12.01.2005 17:13

8 Gast (Gast)

Hat mir sehr geholfen!
Danke für den Hinweis
Dagmar

31.01.2005 17:42

9 othmar (Gast)

hallo, hab folgendes problem und ich komm einfach nit weiter:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Holidaytrips with our selected classic cars - Oldtimerreisen. classic cars Oldtimer classica.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/global.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- Headerlogo -->
<div class="header" id="header"></div>

<!-- Menp -->
<div class="menue" id="menue">Philosophie Routen Fahrzeuge Hotels Essen&Trinken Events Service Incentive Rallye-Coaching Kontakt</div>

<!-- Hauptbereich -->
<div class="formatMain" id="formatMain">
<div class="main" id="main">hier kommt der hauptcontent rein</div>
</div>


<!-- Footer -->
<div class="footer" id="footer" ></div>


</body>
</html>



--- CSS
body {
background-color: #004400;
padding: 0px;
margin-top: 20px;
margin-left: 0px;
margin-right: 0px;
}

#header {
background-image: url(../img/template/header.jpg);
background-repeat: no-repeat;
height: 128px;
width: 100%;
position: relative;
background-position: center;
z-index: 1;
}

#menue {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
position: relative;
background-image: url(../img/template/bg_menu.jpg);
background-repeat: no-repeat;
background-position: center;
height: 20px;
z-index: 2;
}

#main {
background-color: #FFFFCC;
width: 800px;
height: 350px;
margin: auto;
text-align: left;
position: absolute;
}

#formatMain {
text-align: center;
}



ie stellts richtig das, mozilla nicht. an was kann das liegen?

würd mich auf eine antwort freuen
grüsse aus salzburg
othmar, fetz@kultig.at

09.02.2005 21:09

10 Jörg Kruse

Hallo othmar,

bei mir schaut die Seite auch im IE (5 und 6) irgendwie verschoben aus, nur anders. Der Fehler liegt meines Erachtens in der CSS Datei bei dem position: absolute; in #main - wenn du diese Angabe rausnimmst, zentrieren sowohl Mozilla Firefox als auch der IE gleichermaßen den <div> für den Hauptcontent

#main {
background-color: #FFFFCC;
width: 800px;
height: 350px;
margin: auto;
text-align: left;
}

09.02.2005 21:39