Gleiche vertikale Ausrichtung von 2 bzw 1 Textzeile in Box?

[Divspan]

Hallo,

ich habe folgendes Problem:

Ich habe mehrere Boxen fester Größe auf der Seite, welche ich erstellen möchte. Die Boxen haben einen Rahmen und der Inhalt der Boxen (immer eine oder zwei Textzeilen) soll vertikal mittig ausgerichtet sein.
Mein Problem ist nun, dass die einzelne Textzeile ja von der Position in der Box genau mittig sein müsste während bei zwei Textzeilen die erste leicht über der Mitte, die zweite leicht unter der Mitte sein müsste. Nur schaffe ich es bisher lediglich, dass jeweils die erste Textzeile auf gleicher höhe ist und somit meist die einzelne Textzeile zu weit oben ist.
Den Boxen verschiedene Klassen zu geben und dementsprechend den Abstand anzupassen möchte ich nicht, da es dann zu unflexibel ist.

Gibt es dafür eine Lösung bzw. irgendeinen Trick dies zu bewerkstelligen? Wäre mir wirklich eine große Hilfe.

Vielen Dank auf jeden Fall schon mal

[Gunnar Bittersmann]

@@Divspan:

nuqneH

Gibt es dafür eine Lösung bzw. irgendeinen Trick dies zu bewerkstelligen?

Natürlich.

Zur verticalen Ausrichtung dient – wer hätte es gedacht – 'vertical-align'. [CSS2 §10.8.1]

Aus „Angewendet auf:“ ergibt sich, was noch zu tun ist: 'display' auf den entsprechenden Wert setzen.

Qapla'

[Divspan]

Danke für die rasche Antwort.

Wie display auf den entsprechenden Wert setzen? Welchen meinst du da?
Ansonsten hat vertical-align bei mir als Befehl noch nie richtig funktioniert. Aber vielleicht lag das mit dem von dir erwähnten display-Wert zusammen den ich vergessen habe. Über eine Aufklärung wär ich sehr dankbar :-)

[Gunnar Bittersmann]

@@Divspan:

nuqneH

Wie display auf den entsprechenden Wert setzen? Welchen meinst du da?

Die gezeigte Stelle in der CSS-Spec hast du gelesen?

Ansonsten hat vertical-align bei mir als Befehl noch nie richtig funktioniert.

Es ist auch kein Befehl, sondern bestenfalls Empfehl.

'vertical-align' ist eine Eigenschaft. [CSS2 §4.1.8, s.a. vorige Abschnitte]

Qapla'

[Divspan]

Ja ich habe es gelesen aber leider versteh ich es nicht so ganz, tut mir leid.
Könntest du mir eventuell bitte ein kleines Beispiel zeigen?

[Gunnar Bittersmann]

@@Divspan:

nuqneH

Ja ich habe es gelesen aber leider versteh ich es nicht so ganz, tut mir leid.

an besagter Stelle:

„'vertical-align' […] Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente

Oben auf der Seite findest du das Inhaltsverzeichnis, darin 9.2.5 Die 'display'-Eigenschaft

„'display' Wert[:] inline | block | list-item | […] | table-cell | table-caption | none | inherit“

Jetzt kannst du eins und eins zusammenzählen?

Qapla'

[Divspan]

Das mit display:inline klappt bei mir aber leider nicht so richtig und display:table-cell klappt ja im IE6 unter anderem nicht. Tut mir ja leid dass ich mich nicht so sehr auskenne um die Zusammenhänge zu verstehen. Von daher meinte ich ja würde mir ein kurzes Beispiel schon weiterhelfen.

[ChrisB]

Hi,

Von daher meinte ich ja würde mir ein kurzes Beispiel schon weiterhelfen.

http://www.google.com/search?q=display+table-cell+vertical-align+example -> http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

und display:table-cell klappt ja im IE6 unter anderem nicht.

Workaround dafür ist sogar auch schon eingebaut.

MfG ChrisB

[Der Martin]

Hallo,

9.2.5 Die 'display'-Eigenschaft
„'display' Wert[:] inline | block | list-item | […] | table-cell | table-caption | none | inherit“

warum fehlen hier die Werte inline-block, table, table-row? Wurden die erst mit CSS 2.1 nachgeliefert?

Jetzt kannst du eins und eins zusammenzählen?

Manche bekommen dann drei heraus.

Ciao,
 Martin

[MudGuard]

Hi,

9.2.5 Die 'display'-Eigenschaft
„'display' Wert[:] inline | block | list-item | […] | table-cell | table-caption | none | inherit“

warum fehlen hier die Werte inline-block,

weil Gunnar auf die Übersetzung der veralteten Version 2.0 verweist

table, table-row? Wurden die erst mit CSS 2.1 nachgeliefert?

weil Gunnar die Liste gekürzt hat, worauf er per [...] hinweist.

cu,
Andreas

[Der Martin]

Hallo,

table, table-row? Wurden die erst mit CSS 2.1 nachgeliefert?
weil Gunnar die Liste gekürzt hat, worauf er per [...] hinweist.

oh shit, das ist mir gar nicht aufgefallen. Danke!

Ciao,
 Martin