li der Höhe zentrieren

[Claudia]

Hallo !

ich probier schon einige Zeit lang an einer Navigationsliste herum.

Hier mein Code:

  
#left ul li {  
margin-bottom: 5px;  
width: 135px;  
height: 40px;  
background:#dcddde;  
border: 7px solid white;  
vertical-align: middle;  
text-align: center;  
}  
  
#left ul li a, #left ul li a:link,#left ul li a:visited {  
color:#4f1111;  
font-weight: bold;  
font-size: 14px;  
height: 40px;  
line-height: 40px;  
vertical-align: middle;  
}  

Und zwar möchte ich die Links in der Höhe zentrieren. Mit line-height und vertical-align: middle klappt das auch gut. Das Problem ist nur .. manchmal habe ich überlange Navigationstexte, die dann über 2 Zeilen gehen. Dann möchte ich immernoch dass die Inhalte zentriert sind. In diesem Fall entsteht aber ein Space von 40 Pixeln und der Linktext "fällt unten aus dem Rahmen".

Habt Ihr einen Tipp ? Lässt sich das allein mit CSS lösen ?

Gruss
Claudia

[Felix Riesterer]

Liebe Claudia,

Und zwar möchte ich die Links in der Höhe zentrieren. Mit line-height und vertical-align: middle klappt das auch gut. Das Problem ist nur .. manchmal habe ich überlange Navigationstexte, die dann über 2 Zeilen gehen. Dann möchte ich immernoch dass die Inhalte zentriert sind. In diesem Fall entsteht aber ein Space von 40 Pixeln und der Linktext "fällt unten aus dem Rahmen".

das Problem hatte ich bei meinen Memory-Spielkarten in meinem Quiz-Script.

Habt Ihr einen Tipp ? Lässt sich das allein mit CSS lösen ?

Ich habe es so gemacht:

.feld-inhalt {  
    display: table-cell;  
    vertical-align: middle;  
    text-align: center;  
}

Liebe Grüße,

Felix Riesterer.

[Claudia]

Wow super .. vielen vielen Dank !
display: table-cell kannte ich noch nicht.

[Længlich]

Way' xast sxelx'ált!

Wow super .. vielen vielen Dank !
display: table-cell kannte ich noch nicht.

Der IE < 8 auch noch nicht. Falls Du den unterstützen mußt/willst, ist ein Workaround nötig (sollte mit display:inline-block machbar sein).

Viele Grüße vom Længlich

[apsel]

Om nah hoo pez nyeetz

das Problem hatte ich bei meinen Memory-Spielkarten in meinem Quiz-Script.

Schick!

Das Bienchen könnte allerdings sowohl Nutztier als auch Insekt sein.

Matthias

[krischi]

moinmoin

Habt Ihr einen Tipp ? Lässt sich das allein mit CSS lösen ?

ich vermute mal wo das eigentliche Problem liegt...
vertical align funktioniert nur mit Tabellenzellen und Inline-Elementen
der passende Ansatz, den du dann suchst, müsste Inline Block und margin sein

Gruß Krischi