vertical-align wird nicht berücksichtigt

[Gerhard]

Hallo
Lerne mich gerade in Div-Layouts ein.

Aber jetzt treten schon anfangs erste Schwierigkeiten mit CSS auf:

  
.links {  
      width:150px;  
      height:300px;  
      padding:0px;  
      margin-top:25px;  
      margin-bottom:25px;  
      background-image:url('kastenback.gif');  
      text-align:center;  
      vertical-align:middle;  
    }  

Das dazugehörige DIV:

  
<div class="links">  
  das ist ein test  
</div>  

Der Text wird trotz der Definition vertical-align:middle; ganz oben ausgerichtet.

Wo liegt da der Fehler?
Danke
lg Gerhard

[Ingo Turski]

Hi,

Der Text wird trotz der Definition vertical-align:middle; ganz oben ausgerichtet.

Wo liegt da der Fehler?

darin, daß Du eine Eigenschaft verwendest, die für dieses Element nicht definiert ist.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Lerne mich gerade in Div-Layouts ein.

Gerhard,
Dass du dir mal nicht eine ernste Divitis holst.

Der Text wird trotz der Definition vertical-align:middle; ganz oben ausgerichtet.
Wo liegt da der Fehler?

[CSS2 §10.8] sagt dir, auf welche Elemente du diese Eigenschaft anwenden kannst. Daran hat sich auch in [CSS21 §10.8] nichts geändert.

Live long and prosper,
Gunnar

[Gerhard]

OK anscheinend funktioniert es mit einem Div nicht.
Und wie schaffe ich es dann einen Text in einer Box vertikal auszurichten, deren Maße ich bereits kenne?
Falls das irgendeine Rolle spielt es handelt sich um Listen-Daten also werde ich auch eine <ul> zum Einsatz bringen. Kann man das dazu irgendwie nutzen? Ich habe keinen Tau!
Danke
lg Gerhard

[Gunnar Bittersmann]

Gerhard,

OK anscheinend funktioniert es mit einem Div nicht.
Und wie schaffe ich es dann einen Text in einer Box vertikal auszurichten, deren Maße ich bereits kenne?

Indem du die display-Eigenschaft des Elements (kann auch div sein) auf einen Wert setzt, für den vertical-align Wirkung zeigt.

Effekt im IE 5.0: keiner; IE 6 hab ich gerade nicht.

Live long and prosper,
Gunnar

[Gerhard]

Indem du die display-Eigenschaft des Elements (kann auch div sein) auf einen Wert setzt, für den vertical-align Wirkung zeigt.

Aber dann zeigen das width und das height Attribut wieder keine Wirkung!
Dass kann doch nicht die Möglichkeit sein, alles was ich will ist ein verdammtes 150x300 pixel großes kastl indem ein vertikal zentrierter text steht!
Ich weiß schon warum ich bis jetzt alles mit Tabellen gemacht habe.
Bitte um Hilfe
lg Gerhard

[Gunnar Bittersmann]

Gerhard,

Indem du die display-Eigenschaft des Elements (kann auch div sein) auf einen Wert setzt, für den vertical-align Wirkung zeigt.
Aber dann zeigen das width und das height Attribut wieder keine Wirkung!

Ich sagte auch nicht div {display: inline} …

Ich weiß schon warum ich bis jetzt alles mit Tabellen gemacht habe.

In gewisser Weise tust du das mit div {display: table-cell} immer noch. ;-)

Live long and prosper,
Gunnar

[Mel]

Effekt im IE 5.0: keiner; IE 6 hab ich gerade nicht.

Soweit ich mich erinnern kann auch da keine Wirkung... ;(

Gerhard, schau Dir doch auch mal Ingos Artikel hier an:
 http://www.1ngo.de/web/zentrierung.html

vg Melanie

[nance]

Hi Gerhard!

OK anscheinend funktioniert es mit einem Div nicht.

Doch schon, aber anders. Du kannst das div in die Mitte schieben, indem du ein halbes Fenster Abstand zum oberen Rand bildest und dann die Hälfte der Höhe deines div dieses wieder zurückschiebst.
Also so etwa:

  
top: 50%;  
margin-top: -150px;  //wenn dein div 300px hoch ist  

Gruß
nance