CSS: Text in DIV-Element vertikal zentrieren

[LordZed]

Hi! Ich habs versucht, aber irgendwie krieg ich das nicht hin. Ich hatte das Problem irgendwann mal gelöst, aber ich finds nicht mehr.

Ich habe ein DIV-Element, welches eine Höhe und Breite von 100% hat. Nun will ich in diesem DIV-Tag einen Text genau in der Mitte darstellen. Während es horizontal ganz einfach mit
text-align: center;
funktioniert, klappt das alles für die vertikale Positionierung mit
vertical-align: middle;
nicht. Kann mir einer erklären, was ich an der Eigenschaft falsch verstanden habe, dass er das nicht macht!?

[ezzemm]

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[The_Invisible]

hach, wie war das mit tabellen noch einfach :)

mfg

[LordZed]

Wohl wahr! Mit ner 1x1-Tabelle ist das kein Problem und wenn ich mich nicht irre ist das vertical-align da auch kein Problem.

Aber Tabellen zur Darstellung rein visueller Inhalte ist ja nicht mehr erlaubt :-P

//EDIT
Gibts nicht noch ne einfache Variante ohne "hack"?! Was habe ich an diesem "vertical-align" denn falsch verstanden? Was zentriert es denn horizontal, wenn nicht den Text im DIV oder ein DIV in einem anderen DIV, denn beides geht nicht...

[DanMan]

Gibts nicht noch ne einfache Variante ohne "hack"?! Was habe ich an diesem "vertical-align" denn falsch verstanden? Was zentriert es denn horizontal, wenn nicht den Text im DIV oder ein DIV in einem anderen DIV, denn beides geht nicht...
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

Machs einfach über line-height, wenns nur Text ist. Das setzt du auf die Höhe der Box und fertig.

[LordZed]

Die Höhe der Box ist aber prozentual, also 100%! Geht das dann auch!? Weiß nicht, ob es nur Text ist. Viel mehr ist es wohl ein inneres DIV mit einer festen größe, dass ich in einem äußeren DIV mit voller Bildschirmgröße horizontal und vertikal zentrieren will (wie unten gezeigt).

+-----------OUTTER-------------+
|.............................................|
|........##############.........|
|........#........................#.........|
|........#........INNER........#.........|
|........#........................#.........|
|........##############.........|
|.............................................|
+--------------------------------+

[ezzemm]

Wenn du wirklich ein Element in der Mittel des Bildschirmes platzieren willst und nicht Javascript oder den oben verlinkten Weg nehmen willst, dann nimm halt eine Tabelle.

Ich persönlich habe mir angewöhnt, anstatt die Tabellen-Funktionen und -Designs auf CSS umzustricken mir einfach Designs auszudenken, die mit CSS gut funktionieren.

[biertrinker]

tabellen sind doch garnicht mehr zukunfts orientiert,
du solltest beis divs bleiben

[rotalever]

tabellen sind doch garnicht mehr zukunfts orientiert,
du solltest beis divs bleiben
Wenn es mit Tabellen aber "besser" geht.

[The_Invisible]

tabellen sind doch garnicht mehr zukunfts orientiert,
du solltest beis divs bleiben

wenn man tabellen braucht sollte man auch tabellen nehmen und nicht versuchen mit divs oder so sachen tabellen nachzubauen.

nur weil tabellen jetzt nicht mehr zum designen braucht heißt es nicht das es deswegen ausstirbt, im gegenteil. sieh dir zb einfach mal dieses forum an ;)

mfg

[DanMan]

wenn man tabellen braucht sollte man auch tabellen nehmen und nicht versuchen mit divs oder so sachen tabellen nachzubauen.

nur weil tabellen jetzt nicht mehr zum designen braucht heißt es nicht das es deswegen ausstirbt, im gegenteil. sieh dir zb einfach mal dieses forum an ;)

mfg
Ignorance is bliss.

Tabellen nimmt man für Tabellen, und sonst für garnix. Das kannst du gerne im ganzen Internet nachlesen.

[rotalever]

Ignorance is bliss.

Tabellen nimmt man für Tabellen, und sonst für garnix. Das kannst du gerne im ganzen Internet nachlesen.
Wenn einem aber das CSS-zeugs nicht die gewünschte Lösung auf einfache Weise bringt, kommt man so auch nicht weiter.

[DanMan]

Wenn einem aber das CSS-zeugs nicht die gewünschte Lösung auf einfache Weise bringt, kommt man so auch nicht weiter.
Manche Sachen sind eben nicht einfach. Wenn das so wäre bräuchte man keine Spezialisten, sondern könnte einfach alles selber machen.

Davon mal abgesehen ist es so schwer auch wieder nicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0; padding:0;}
.outside {height:100%; width:100%; background:red;}
.inside {height:200px; width:200px; margin:-100px; position:absolute; top:50%; left:50%; background:green;}
</style>
</head>
<body>
<div class="outside">
<div class="inside">
Hier steht irgendwas.
</div>
</div>
</body>
</html>
Noch einfacher wäre es, wenn es den IE nicht gäbe.

Einziges Problem ist, dass die innere Box verdeckt wird, wenn das Browserfenster kleiner wird, als die Box.

[LordZed]

Manche Sachen sind eben nicht einfach. Wenn das so wäre bräuchte man keine Spezialisten, sondern könnte einfach alles selber machen.

Davon mal abgesehen ist es so schwer auch wieder nicht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0; padding:0;}
.outside {height:100%; width:100%; background:red;}
.inside {height:200px; width:200px; margin:-100px; position:absolute; top:50%; left:50%; background:green;}
</style>
</head>
<body>
<div class="outside">
<div class="inside">
Hier steht irgendwas.
</div>
</div>
</body>
</html>
Noch einfacher wäre es, wenn es den IE nicht gäbe.

Einziges Problem ist, dass die innere Box verdeckt wird, wenn das Browserfenster kleiner wird, als die Box.

Und das Problem ist, dass die Box eine feste höhe hat. Wenn die Box also nicht genauso hoch ist, wie der Text Platz braucht, dann ist die Box zwar mittig, der Text im Verhältniss zur Gesamtseite aber nicht.

Hat das innere DIV also eine feste Größe, dann lässt es sich problemlos positionieren (klar! Mittig positionieren - das wird an der oberen linken Ecke gemessen - und dann um die hälfte der größe wieder nach oben und links verschieben!) bei dynamischer Größe klappt das aber nicht, da ein
margin: -50%;
leider nicht funktioniert.

[rotalever]

Manche Sachen sind eben nicht einfach. Wenn das so wäre bräuchte man keine Spezialisten, sondern könnte einfach alles selber machen.
Man kann Dinge auch immer besonders kompliziert machen. Und mit Tabellen geht es nun wirklich einfach, auch wenn es nicht "gutes" Webdesign ist.

[LordZed]

Man kann Dinge auch immer besonders kompliziert machen. Und mit Tabellen geht es nun wirklich einfach, auch wenn es nicht "gutes" Webdesign ist.
Das ist doch hier jetzt vollkommen unwichtig, denn es geht mir nicht darum, dass ich es mit ner Tabelle "unschön" lösen kann, denn das will ich nicht, sondern es geht mir darum ob bzw. wiefern man Text in einem DIV-Tag vertikal zentrieren kann bzw. wieso das nicht funktioniert! Das ist es, was mich interessiert! ;)

Ich würde gerne verstehen, wie genau dieses Attribute funktioniert, denn es zentriert den Text in einem DIV-Tag nicht vertikal. Auch nicht, wenn ich die Größe dieses DIV-Tags genau angebe. Dachte ja vllt. klappt es nicht, weil er nur die prozentuale, aber nicht die reale Größe kennt und damit ein Problem hat, aber anscheinend ist das auch nicht das Problem. Irgendwie muss doch vertical-align in DIV-Tags funktionieren. Nur wieso tut es das nicht!? Was muss gegeben sein, damit es das tut?

//EDIT
Gut... bei SELFHTML steht, dass vertical-align nur für Inline- und Tabellen-Elemente gültig ist. Daran könnte es natürlich liegen! ;) Dann bleibt wohl nur die umständliche Alternative zu versuchen eine DIV-Box mit unbekannter größe mittig in einer anderen mit 100%-Größe zu positionieren! Dann würde ich nämlich eine DIV-Box bauen, die den text enthält und keine Höhen- und Breitenangaben hat, also mit dem Text mitwächst. Diese gilt es dann in der äußeren zu zentrieren... leider auch kein leichtes spiel, da die größen beider Elemente ja nicht absolut gegeben sind ;)

[The_Invisible]

Ignorance is bliss.

Tabellen nimmt man für Tabellen, und sonst für garnix. Das kannst du gerne im ganzen Internet nachlesen.

ja danke, ich kenne diese "fachdiskussionen" zur genüge.

wenn ich was schnell machen muss, mach ich es aber mit tabellen, weil es einfach einfacher ist mit der positionierung der elemente wie man an diesem thread so schön sieht.

hinzu kommt noch das ich aus der zeit komme in der tabellen noch "in" waren und ich deren syntax im schlaf beherrsche, mit css "darf" ich mich leider nicht so intensiv beschäftigen.

mfg

[rotalever]

Das ist doch hier jetzt vollkommen unwichtig, denn es geht mir nicht darum, dass ich es mit ner Tabelle "unschön" lösen kann, denn das will ich nicht, sondern es geht mir darum ob bzw. wiefern man Text in einem DIV-Tag vertikal zentrieren kann bzw. wieso das nicht funktioniert! Das ist es, was mich interessiert! ;)
Ja. Aber soweit ich weiß, hält CSS keine einfache Lösung dafür bereit, sonst könnte man das einfach mit margin lösen. Folglich geht es da auch nur auf umständliche Weise, also mehr Arbeit.

[DanMan]

@The_Invisible: Manchen ist halt nicht zu helfen. Belassen wir's dabei.

@LordZed: ezzemm hat dir ja schon längst einen Link gegeben, wo erklärt wird, wie es auch ohne Tabellen geht.