Moin!
'vertical-align:middle' - so etwas gibt es. Wenn es nicht funktioniert, dann muß es woanders dran liegen.
Hab ich die URL übersehen?
Fragt ....
Ronald
So, ich hab mal eben mein Wissen aufgefrischt:
Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.
Einzige Variante: Wenn der Text einzeilig ist, kannst du ein line-height mit der gleichen Angabe wie das height des Div setzen. Bei mehrzeiligem Text: Pech gehabt, geht nicht mehr vernünftig.
Ansonsten: nimm eine Tabelle, schließlich sind die ja dafür da.
Bei Tabellenzellen funktioniert das vertical-align.
G.a.d.M.
Ronald
Ohhhh, schade! 
Na, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....
Damit muss ich mich dann wohl noch etwas gedulden.
Trotzdem danke für deine Hilfe! 
Grüße,
Questionmark
Zitat von QuestionmarkNa, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....
Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.
Grundsätzlich:
Tabellen für HTML wurde geschaffen um damit HTML-Seiten zu gestalten. Ob du in die Tabellen nun Text oder Grafiken packst, ob du Tabellenzellen längs oder quer miteinander verbindest - das alles ist die als Webemaster freigestellt, genau so, wie es dir am besten paßt.
Alle Browser verstehen Tabellen. Es gibt für Tabellen unheimlich viele Styles, Head-, Body- und Foot-Tags, verschiedene Rahmen, as auch immer - Styles ohne Ende. Heute, in einer Zeit, wo Stylesheets langsam die HTML-Formatierungen ablösen, gibt es das alles auch in CSS.
Nun möge mir jemand verraten, wozu das alles, wenn nur einer von 10.000 Webmaster irgendwelche Daten tabellarisch auf seine Internetseite packt?
Leider gibt es aber ein paar User, die meinen, sie wissen mehr als andere. Diese paar User machen sich verdammt breit und erzählen allen, daß Tabellen nicht dafür geschaffen wurden, Webseiten zu stylen. Dabei zitieren sie sich dann fleißig gegenseitig und jeder weiß es noch ein wenig besser als der andere.
Irgendwie erinnert mich das ein wenig an Till Eulenspiegel, an Atomkraftgegner, militante Nichtraucher, Wehrdienstverweigerer, Porschehasser - alle haben Argumente, aber alle eben nur einseitig.
Auf wen du höen willst, entscheide bitte selbst - ich erstelle meine Internetseitenmit mit alledem, was HTML & Co. hergibt. Warum sollte ich auf Funktionen verzichten, die zwar vorgesehen sind, aber einigen wenigen Usern nicht passen?
http://de.selfhtml.org/html/tabellen/layouts.htm
G.a.d.M.
Ronald
Zitat von Ronald
Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.
Das tut mir Leid, nerven wollte ich nicht 
Da bin ich wohl einem oder auch mehreren Porsche hassenden Till Eulenspiegeln augesessen 
Vielen Dank für die Richtigstellung und den geschichtlichen Exkurs - werd jetzt wieder ohne schlechtes Gewissen Tabellen verwenden, natürlich gepaart mit CSS 
Kenn ja jetzt jemand Erfahrenen, auf den ich verweisen kann, wenn mich jemand anmault mit dem Hinweis, dass Tabellendesign nicht professionell genug ist....
Es grüßt,
Questionmark
Hi Questionmark,
Du muss nicht gleich die flinte ins Korn werfen.....
Es GIBT Lösungen, ein Div mittig mittig zu bekommen.
ZitatRonald schrieb:
Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.
Ronald das ist leider..... FALSCH
Ganz korrekt und ohne Bastelei geht das schon über Netscape/Firefox...
mit
Vertical-Align !!!!
allerdings, ist das dann wie eine Tabelle, und dann ist es wirklich leichter,
das ganze direkt als echte tabelle mit <table> zu machen, dann funktioniert
Vertical-align nämlich auch mit dem Internet Explorer , wie Roland bereits schrieb!!!!
beim Explorer muss man ohne <table> etwas kräftiger in die Trickkiste greifen, aber es geht auch !!!
hab ein bischen in Google gewühlt, und tatsächlich eine Lösung für den internet Explorer gefunden !!Hab eine kleine Modifikation vorgenommen, so dass es auch alles mittig mittig ist, und unter mein Tutorial gehängt !! 
Gruß Peter
hab alles mal schön zusammengefasst und in HTML gebannt
http://<br>http://wow.bundderalten.servegame.org/tutorial_divs_vertikal_ausrichten.html</a><br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//DE">
<html>
<!--
HTML 3.2
Document type as defined on http://www.w3.org/TR/REC-html32
-->
<head>
<title> Div sollen Mittig erscheinen </title>
<style type="text/css">
.table {
display:table;
}
.tr {
display:table-row;
}
.oben {
position:relative;
border:2px;
border-style:ridge;
text-align:center;
vertical-align:top;
width:200px;
height:200px;
display:table-cell;
}
.mitte{
position:relative;
border:2px;
border-style:ridge;
text-align:center;
vertical-align:middle;
width:200px;
height:200px;
display:table-cell;
}
.unten{
position:relative;
border:2px;
border-style:ridge;
text-align:center;
vertical-align:bottom;
width:200px;
height:200px;
display:table-cell;
}
#outer {width:200px;height: 200px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;width:100%} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] { position: static} */
/* just format */
div.greenBorder {border: 1px solid green; background-color: ivory}
</style>
</head>
<body >
[b]Zuerst die klassische Variante, Div inhalte Vertikal zu mitten,
Dazu verwendet man eine Tabelle, in denen du die Spalten mit CSS formatierst
innerhalb der spalte sind dann alle divs je nach wunsch vertikal positioniert!
verwendet vertical-align in < td >
[/b]
</p>
<table>
<tr>
<td style="vertical-align:top;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
<div id="div in Tabelle oben" style="border:2px;border-style:ridge">
[b]ich bin ein DIV[/b]
[b] ->oben<- [/b]
[b]durch hilfe einer tabelle[/b]
</div>
</td>
<td style="vertical-align:middle;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
<div id="div in Tabelle mittig" style="border:2px;border-style:ridge">
[b]ich bin ein DIV[/b]
[b] ->mittig<- [/b]
[b]durch hilfe einer tabelle[/b]
</div>
</td>
<td style="vertical-align:bottom;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
<div id="div in Tabelle mittig" style="border:2px;border-style:ridge">
[b]ich bin ein DIV[/b]
[b] ->unten<- [/b]
[b]durch hilfe einer tabelle[/b]
</div>
</td>
</tr>
</table>
[b]Nun die "echte" CSS Variante, Divs Vertikal zu mitten,
geht allerdings NUR in Netscape/Firefox
verwendet hierbei den 'Display'-Befehl von CSS und 'vertical-align'
ist allerdings nahezu das gleiche wie mit < table >,
daher nicht umbedingt praktikabel !!
[/b]
</p>
<div id="ich bin eine Tabelle" class="table">
<div id"ich bin eine Reihe" class="tr">
<div id="ich bin Spalte 1" class="oben">
<div id="jetzt das Div" style="border:2px;border-style:ridge;">
[b]
ich bin eine DIV Tabelle
->oben<-
gehe allerdings NUR in Netscape
[b]
</div>
</div>
<div id="ich bin Spalte 2" class="mitte" >
<div id="jetzt das Div" style="border:2px;border-style:ridge;">
[b]
ich bin eine DIV Tabelle
->Mitte<-
gehe allerdings NUR in Netscape
[b]
</div>
</div>
<div id="ich bin Spalte 3" class="unten">
<div id="jetzt das Div" style="border:2px;border-style:ridge;">
[b]
ich bin eine DIV Tabelle
->unten<-
gehe allerdings NUR in Netscape
[b]
</div>
</div>
</div>
</div>
[b]Jetzt eine Variante, mit der man das direkte DIV sowohl unter Netscape/Firefox,
als auch unter dem Internet Explorer mittig positioniert..
ohne die klassische < table > Funktion von HTML
[/b]
</p>
<div id="outer" class="greenBorder">
<div id="middle">
<div id="inner" class="greenBorder" align="center">
<div id="jetzt das Div" style="width:100px;border:2px;border-style:ridge;text-align:center">
hier kann
[b]irgentwas stehen[/b]
alles mittig
</div>
</div>
</div>
</div>
</body>
</html>Zitat von Peter
Es GIBT Lösungen, ein Div mittig mittig zu bekommen.
Danke für den Hinweis, Peter,
hab mir das Ganze mal angeschaut, aber nach Ronalds letztem Post bin ich zu dem Schluss gekommen, nicht alles über CSS erzwingen zu müssen um dem modernen Webdesign zu genügen. Und wie du schon selbst gesagt hast, scheint mir in diesem Fall der <table>-Tag wirklich um einiges praktikabler...
Grüße
Zitat von PeterRonald das ist leider..... FALSCH
Nein, es war schon genau richtig: innerhalb eines Div-Tag gibt es keine vertikale Zentrierung.
Was du machst, ist Div-Tags so lange zu schachteln, bis es irgendwann wie eine vertkale Zentrierung ausieht.
Das sind aber zwei verschiedene Schuhe.
G.a.d.M.
Ronald
Schau mal bitte den Quelltext im code block an
(Bitte mit Firfox & Family anschauen !!) 
Der inhalt ist doch mittig, oder was meinst du ??
da beisst die Maus kein Faden ab.
Es geht halt leider nunmal nur im Netscape/Firefox...
Dass der Internet explorer zu doof ist heisst noch lange nicht, das es nicht geht, oder ?
das mit dem IExplorer mittels <table> Div-inhalte mittig zu setzen sind ,war wirklich etwas unglücklich
formuliert, gebe ich ehrlich zu
Zitat
Peter schrieb:
das ganze direkt als echte tabelle mit <table> zu machen, dann funktioniert
Vertical-align nämlich auch mit dem Internet Explorer , wie Roland bereits schrieb!!!!
das stimmt leider nicht so ganz, asche über mein haupt , aber solange man beim DIV Container keine direkte Grössenangabe zur höhe macht, hat man in einem <Table> den gleichen optischen effekt im Internet explorer!!
und wenn ich bei meinem Div rahmen abstand zum text haben möcht, verwende ich halt padding
Wenn ich mit meinem Auto nicht direkt durch den Euro Tunnel von Frankreich nach England fahren kann, packe ich mein Auto halt auf einen Zug....
So betrachtet fahre ich doch dann auch mit meinem Auto durch den Tunnel, oder ??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//DE">
<html>
<!--
HTML 3.2
Document type as defined on http://www.w3.org/TR/REC-html32
-->
<head>
<title> Div sollen Mittig erscheinen </title>
</head>
<body >
<div id="text mittig" style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">
[b]ich bin ein DIV[/b]
[b] ->mittig<- [/b]
[b]gehe aber nur in Netscape[/b]
</div>
<div id="text mittig" style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">
lkjasbbvla jkgbvlavjbav
aölghkaeölgkaeölg kaeöekrgalärghk
eaölghkaäegkheäakghbäelkgäkehgkeg
ägkhaeä köghaäehgäle thktgä ehgäkkaehg
eegaägkha ägkhaeäghaetä thnae äkthaö#egh
a egtjaäeth jhaäehj
</div>
</tr>
</table>
</body>
</html>Zitat von PeterSchau mal bitte den Quelltext im code block an
(Bitte mit Firfox & Family anschauen !!)
Der inhalt ist doch mittig, oder was meinst du ??
da beisst die Maus kein Faden ab.
Klar ist der Text mittig - aber nicht mittig in einem Div-Tag, sondern mittig in einem Table-Tag: Mit "display:table-cell;" defenierst du, daß das div sich wie eine Tabellenzelle verhalten soll, dazu gehört aber dann auch, daß das Zellen-Tag (<tr>) in HTML mit definiert wurde. Eine Tabellenzelle kann immer nur innerhalb einer Tabelle (<table>) und der darunterliegenden Tabellenzeile (tr) dargestellt werden. Das CSS 'display' ist im Grunde nichts als ein Schalter.
In deinem Beispiel fehlt jedoch die komplette Tablestruktur, und du erzeugst damit fehlerhaften HTML-Quelltext, was in diesem Fall die Validatoren nicht bemerken, da Stylesheets von Ihnen noch nicht (richtig) verarbeitet werden.
So gesehen verhält sich in diesem Fall der IE richtig, Mozilla versucht deinen Fehler durch seine Fehlertoleranz auszugleichen.
Auf jeden Fall ist der Sinn der display-Eigenschaft ein völlig anderer, als er von dir verwendet wird, lies mal z.B. bei SelfHTML nach.
Richtig eingesetzt müßte das ganze z.B. so aussehen:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">
[b]ich bin ein DIV[/b]
[b] ->mittig<- [/b]
[b]gehe aber nur in Netscape[/b]
</td>
<td>
<tr>
</table>
und dann ist dein falscher Zauber vorbei.
Es sind und bleiben zwei verschiedene Schuhe, auch wenn du noch so viele Krücken baust.
In einem Div-Tag kann man zur Zeit noch keinen Text vertikal zentrieren, das soll erst mit CSS 3 kommen.
Das war die Fragestellung des Threads.
G.a.d.M.
Ronald
ich will jetzt echt nicht mehr mit dir streiten....
nur weil man mit speziellen css eigenschaften ein Div dazu bringt, sich wie eine tabelle zu verhalten, heisst noch lange nicht das da die klassische <table> Funktion dahinter steckt....es ist halt eine table funktion von CSS denn css soll ja bekanntlich eine Erweiterung oder Alternative zum klassischen HTML sein
ZitatRoland schrieb
Klar ist der Text mittig - aber nicht mittig in einem Div-Tag, sondern mittig in einem Table-Tag: Mit "display:table-cell;" defenierst du, daß das div sich wie eine Tabellenzelle verhalten soll, dazu gehört aber dann auch, daß das Zellen-Tag (<tr>) in HTML mit definiert wurde.
und da du so gerne Self HTML zitierst, tue ich das hiermit auch mal:
http://de.selfhtml.org/css/eigenschaf…ung.htm#display
selfHTML Beispiel:
<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body>
<div class="table">
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div>
</body></html>ZitatSelfHTML schreibt:
Erläuterung:
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.
Da wir es laut obriger Beschreibung wohl mit einem Zitat "waschechten Tabelle aus Divs" zu tuen haben, beziehen sich auch die evnt. verwendeten zusatzfunktionen wie z.B. Vertical-align auf diese Zitat "waschechten tabellen aus Divs", oder lügt SelfHTML etwa ???
ergo: ein Div kann laut CSS beschreibung ein Vertical-align !!!!!
Was der Browser draus macht, wissen wir bei vielen CSS sachen, ist eine andere Sache....
und die sache mit dem einsamen Display:table-cell Div über das du dich so aufregst....
Stimmt....ich hätte event. eine div verschachtlung machen müssen, um die klassische <table> funktion zu simulieren...
aber ich hätte ja auch
display:inline nehmen dürfen laut w3c:
ZitatAlles anzeigenW3 schreibt
'display'
Value: inline | block | list-item | run-in | compact | marker | table |inline-table| table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
ZitatAlles anzeigenw3 schreibt:
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual
W3C hat recht, denn die machen die Regeln !!!!
Sehe es doch einfach ein !!!
Gruß,
Peter
ps: DISPLAY ist eine CSS 1.0 Funktion ; VERTICAL-ALIGN ist auch eine CSS 1.0 Funktion !!!!
Sorry, aber ich will wirklich nicht streiten.
Du schmeist nur einfach alles durcheinander und dann paßt es schon.
Die Frage war: Kann ein Div-Tag Text per CSS vertikal zentriert anzeigen?
Die richtige Antwort lautet immer noch 'nein, das kann es nicht.'
Du machst daraus jedoch die Frage: Kann ein Div-Tag per CSS die Eigenschaften einer Tabellenzelle annehmen?
Diese Antwort lautet: ja, das kann es.
Die dritte Frage wurde nie gestellt, denn die Antwort kennt jeder:
Kann eine Tabellenzelle Text vertikal zentrert anzeigen? (ja).
Kapierst du jetzt, was ich meine?
Vielen Dank für deine Fleißarbeit, aber du liegst leider immer noch neben der Fragestellung.
Außerdem nützt deine Notlösung nichts, wenn es nur Mozilla versteht, leider ist der größere Teil der User immer noch mit dem IE unterwegs.
Gute Nacht
Ronald
... für den das Thema hier beendet ist.
also ich will mich dann mal roland anschließen....
ein div ansich kann nicht vertikal zentriert werden. geht einfach nicht.
und genau das war gefragt...
aber wie ja erwähnt ises zwar über tabel-cell möglich, allerdings nicht valide.
und bevor wir jetzt nocht die schwerte rausholen mach ich det mal zu...