[CSS] Text in Block-Element vertikal zentrieren?

Ich habe nen Link der im CSS wie folgt definiert ist:

#bla a {
display: block;
height: 70px;
}
Nun würde ich den Linktext gern in dieser Höhe vertikal zentrieren. Hat jemand nen Lösungsvorschlag?
Zu beachten wäre, dass der Text ab und zu über mehrere Zeilen geht und damit fällt line-height schonmal raus.
Danke im voraus.
Grüße n26

Eine vertikale Zentrierung ohne fixe Höhe ist nicht möglich.

Schonmal "min-height" statt "height" versucht?
Bin nicht sicher, ob's funktioniert, aber einen Versuch wäre es wert.
Gruß,
Marc

Dies war einer der Gründe warum ich striktes CSS-Design als akademisch deklariert hatte. Ich hatte mich dann für ein Text entschieden.
Unsauber, aber es funktioniert. Ergebnis zählt.

Mit CSS ist das wie mit Allem: Es hat Vor- und Nachteile.
(Ich arbeite bei mir auf der Seite mit den statischen Inhalten auch noch mit einer Tabelle für den Inhalt, weil ich per CSS das mit dem Hintergrund und dem Rahmen nicht hinbekommen habe. Wenn die Ecken nicht transparent wären, gäbe es kein Problem, aber da die Ecken abgerundet sind ging's leider nicht...)

Original von TheUndeadable
Dies war einer der Gründe warum ich striktes CSS-Design als akademisch deklariert hatte. Ich hatte mich dann für ein Text entschieden.
Unsauber, aber es funktioniert. Ergebnis zählt.

Das ist jedoch an einer stelle wo eine Tabelle viel umständlicher ist.
Ich könnte max. folgendes machen: Link
Wenn ich jetzt die Tabellen noch bissl via css anpasse habe ich das gewünsche ergebnis doch lieber wäre es mir, wenn das über die ganze Größe gehen würde.
Sonst müsste ich der Tabelle ein cursor: pointer; und eine onClick weiterleitung verpassen das will ich jedoch eigentlich umgehen.
Aber ich denke wir müssen uns darauf einigen, dass das nicht geht .

Das Einzige was du noch machen könntest, ist z.B. mit prototype die blockhöhe des Elements zu ermitteln und wenn diese die CSS Höhe übersteigt dynamisch anzupassen.
Hab sowas ähnliches neulich mal bei einem Effekt-Menü gemacht. Klappte ohne Probleme in allen Browsern.
Gruß,
Marc

Ich würde probieren mich mit padding-top zu spielen. Das sollte durchaus funktionieren.

Original von raufaser
Das Einzige was du noch machen könntest, ist z.B. mit prototype die blockhöhe des Elements zu ermitteln und wenn diese die CSS Höhe übersteigt dynamisch anzupassen.

Wäre eine Möglichkeit aber ich habe nicht vor prototype oder was in dieser Art zu nutzen.

Original von Nuky

Ich würde probieren mich mit padding-top zu spielen. Das sollte durchaus funktionieren.
Mit padding-top ist das kein Problem, jedoch sobald ich mehr als eine Zeile habe passt das dann leider nichtmehr.

dynamisch rausfinden wieviele zeilen es werden und dann dementsprechend anpassen?
(oder halt doch die table)

#bla a {
	display: table-cell;
	vertical-align:middle;
	height: 70px;
}

Funktioniert in fast allen Browsern ausser IE7
www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

IE6 auch nicht...

Naja davon gehe ich mal aus, dass die sowas nicht rauspatchen oder so Ich meinte damit nur, dass die IE-Reihe sowas net checkt.

Das ist CSS2, wie auch min-height. Defakto kann der IE6 das schon mal überhaupt nicht..

Original von KoMtuR
Funktioniert in fast allen Browsern ausser IE7

Das ist nicht richtig. Das funktioniert im IE nicht, das stimmt aber es funktioniert auch nicht im Opera, im FF und auch nicht im Safari (gerade durchgetestet).

 TRUE DESTRUCTION

top: 40% deswegen, weil dein link auch eine gewisse größe hat. bei 70px würd ich sogar noch 35% nehmen.

Original von Nuky
top: 40% deswegen, weil dein link auch eine gewisse größe hat. bei 70px würd ich sogar noch 35% nehmen.

Da habe ich jedoch das Prob, dass mehrzeiliger Text nicht zentriert ist. Das zentrieren von einer Zeile ist mit vielerlei Sachen möglich...
Nunja ich habe jetzt eigentlich damit abgeschloßen und werde mir ne Lösung außerhalb CSS suchen.
Danke auf jeden Fall trotzdem!

Original von n26

Original von KoMtuR
Funktioniert in fast allen Browsern ausser IE7

Das ist nicht richtig. Das funktioniert im IE nicht, das stimmt aber es funktioniert auch nicht im Opera, im FF und auch nicht im Safari (gerade durchgetestet).
Naja dann solltest du mal ein Update machen. Firefox funktioniert und Opera auch. Das es beim Safari nicht geht (ich nehme an du hast die Beta 3 für Windows) liegt schon im Namen Beta.
PS.: ich nutze derzeit FF2.0.0.7 und Opera 9.23

Original von KoMtuR
Naja dann solltest du mal ein Update machen. Firefox funktioniert und Opera auch. Das es beim Safari nicht geht (ich nehme an du hast die Beta 3 für Windows) liegt schon im Namen Beta.
PS.: ich nutze derzeit FF2.0.0.7 und Opera 9.23

FF2.0.0.7, Opera 9.23. Das zum Thema Updates.

Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.

Könnte aber daran liegen, dass ich andere Elternelemente in meinem Test habe als du.
Das display:table-* nicht auf IE6 funktioniert und das ganze für eine Firmenwebsite ist fällt das auch leider raus.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Untitled Document
    
        test
        desfsdf
        sdfsdf
        swadsfsf
        sdfsadfsdfgsad
    

Auch mit display:block ist der Text vertikal zentriert. Aber naja CSS2.1 und IE6 vertragen sich ja eh nicht. Dann bleibt dir wohl nichts anderes übrig als ne Tabelle zu nehmen.
edit: ah ok Text verstehen war nie meine Stärke. Mit dem Elternelement meinen die wohl das Div, wo der Text drin steht. Na ok. Steht ja auch in der Hilfe, dass es entweder ein inline-Element sein muss oder halt ne table-cell.

Original von KoMtuR
Naja dann solltest du mal ein Update machen. Firefox funktioniert und Opera auch. Das es beim Safari nicht geht (ich nehme an du hast die Beta 3 für Windows) liegt schon im Namen Beta.

Diesbzgl. nightly.webkit.org (achtung, nichtmal alpha releases.. aber ggf. zum Testen dennoch nicht verkehrt).