vertikale Listeneinträge vertical-align

[Masha]

Hallo,
ich habe eine vertikale Liste, die ich als display: table darstelle, damit ich die Eigenschaft border collapse nutzen kann.

  
ul#navigation2 {  
	display: table;  
	border-collapse: collapse;  
	list-style: none;  
	width: 231px;  
	margin: 0px;  
	float: left;  
}  
ul#navigation2 li {  
	display: table-row;  
	border: 2px solid #FFF;  
	height: 35px;  
	text-align: center;  
	vertical-align: middle;/* das funktioniert nicht */

Das vertical-align wird ignoriert, da ich display: table-row anwende.
Wie bekomme ich den die Listeneinträge vertikal zentriert?

Besten Dank und viele grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Masha!

ul#navigation2 li { display: table-row; border: 2px solid #FFF; height: 35px; text-align: center; vertical-align: middle;/* das funktioniert nicht */[/code]

Das vertical-align wird ignoriert, da ich display: table-row anwende. Wie bekomme ich den die Listeneinträge vertikal zentriert?

nur eine ungetestete Vermutung: display: table-cell

Matthias

[Masha]

nur eine ungetestete Vermutung: display: table-cell

dann wird die Liste leider horizontal
Es geht über line-height: 35px; aber das ist eine hässliche Lösung

[Beat]

ich habe eine vertikale Liste, die ich als display: table darstelle, damit ich die Eigenschaft border collapse nutzen kann.
[code lang=css]

Das vertical-align wird ignoriert, da ich display: table-row anwende.
Wie bekomme ich den die Listeneinträge vertikal zentriert?

Hast du aus CSS Sicht keine Listeneinträge, sondern Tabellenreihen und anonyme Tabellenzellen, so gar nicht.

Die Frage ist eher: Warum brauchst du border-collapse?
Nutze
li{ border: ... }
li:first-child{ border: ... }

mfg Beat

[Masha]

li{ border: ... }
li:first-child{ border: ... }

mfg Beat

Habe ich gerade ausprobiert. Leider greift vertical-align auch hier nicht. Kann das sein, dass vertical align bei <li> nicht funktioniert? Was hältst Du von der Lösung mit line-hight?
Das ohne display table zu machen ist auf jeden Fall besser. kannte first-chil nicht.

[ChrisB]

Hi,

Leider greift vertical-align auch hier nicht. Kann das sein, dass vertical align bei <li> nicht funktioniert?

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align - “applies to: ...”

Was hältst Du von der Lösung mit line-hight?

Kann man nutzen, wenn man sich *sicher* ist, dass der Inhalt unter allen Umständen einzeilig bleiben wird. (Also auch bei Vergrößerung der Schrift, Änderung der Fensterbreite, etc.)

MfG ChrisB

[Masha]

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align - “applies to: ...”

Jetzt mal für so newbes wie mich: li ist kein "inline-level" oder?

Was hältst Du von der Lösung mit line-hight?

Kann man nutzen, wenn man sich *sicher* ist, dass der Inhalt unter allen Umständen einzeilig bleiben wird. (Also auch bei Vergrößerung der Schrift, Änderung der Fensterbreite, etc.)

Kann ich leider nicht sicher sein.Irgendeine saubere Lösung werd ich schon noch fidnen.

[Gunnar Bittersmann]

@@Masha:

nuqneH

[…] wenn man sich *sicher* ist, dass der Inhalt unter allen Umständen einzeilig bleiben wird.
Kann ich leider nicht sicher sein.

also kannst du auch nicht sicher sein, dass 35 Pixel Höhe für die Listitems ausreichend sind.

Wie wär’s denn, den Listitems keine feste Höhe, aber oben und unten Padding zu geben?

Qapla'

[Masha]

also kannst du auch nicht sicher sein, dass 35 Pixel Höhe für die Listitems ausreichend sind.

Die 35px hatte ich erst einmal zu Vorschauzwecken gesetzt.

Wie wär’s denn, den Listitems keine feste Höhe, aber oben und unten Padding zu geben?

Padding ist ein guter Tipp. werde ich Heutabend mal probieren. Besten Dank für die Unterstützung!

[Cheatah]

Hi,

Kann das sein, dass vertical align bei <li> nicht funktioniert?

nein. CSS-Eigenschaften richten sich *nur* nach CSS-Regelwerken, niemals nach dem Namen eines Elements. Ein Unterschied wäre allenfalls denkbar, wenn <li> das Root-Element des Dokuments wäre (genauer gesagt den Viewport repräsentiert), was in HTML niemals der Fall sein kann.

Ausnahmen machen natürlich Browser-Bugs, aber diejenigen Browser, die hier eine Rolle spielen, verstehen display:table-row u.ä. eh nicht.

Was hältst Du von der Lösung mit line-hight?

Ein üblicher und kampferprobter Weg, um einzeilige Texte vertikal zu zentrieren.

Cheatah