Text in einem Layer per css vertikal auszurichten.

[Oliver L.]

Man möge es Unfähigkeit nennen, doch ist es mir nicht möglich, den Text in einem Layer vertikal auszurichten. Weder vertical-align: middle, ... noch text-align: middle, ... funktioniert. Allerdings will ich es unbedingt mit Layern schaffen, und da die ganze Sache auch noch valid XHTML sein soll, mache ich alle Definitionen per Css.
Danke für jede Hilfe,

Oliver L.

[Tim Tepaße]

Hallo Oliver,

Man möge es Unfähigkeit nennen, doch ist es mir nicht möglich, den Text in
einem Layer vertikal auszurichten.

Das Thema wurde weit unten in einem Thread schonmal angesprochen. :-)

[pref:t=36172&m=197821]

• Tim

[Vinzenz]

Hallo Oliver,

Man möge es Unfähigkeit nennen, doch ist es mir nicht möglich, den Text in einem Layer vertikal auszurichten. Weder vertical-align: middle, ... noch text-align: middle, ... funktioniert. Allerdings will ich es unbedingt mit Layern schaffen, und da die ganze Sache auch noch valid XHTML sein soll, mache ich alle Definitionen per Css.

Was verstehst Du unter vertikaler Ausrichtung? Deine Anstrengungen, unbedingt middle zu verwenden, lassen mich vermuten, dass Du Deinen Text zentrieren willst. Ist das so?

Wenn ja:
    text-align: center;

Ich lege Dir allerdings den CSS-Teil von SelfHTML sehr ans Herz, für Dein jetztiges Problem http://selfhtml.teamone.de/navigation/css.htm#ausrichtung

Vielleicht lernst Du dann den Unterschied zwischen text-align und vertical-align, die zugelassenen Werte für diese beiden Eigenschaften,...

Gruss,

Vinzenz

[Oliver L.]

Danke für den Versuch Vinzenz,

aber nein, du hast mich klar und deutlich verstanden: Ich will den Text im div vertikal ausríchten. Nicht zentrieren, sondern in der Mitte von Decke (des divs) und Boden (des divs) einrichten.

Wäre nett wenn ich weitere Ideen geliefert bekomme,

Oliver L.

[Mathias Bigge]

Hi Oliver L.,

Du brauchst eine Bezugsgröße für die Ausrichtung, etwa eine Tabellenzelle oder eine Linienhöhe.
Das Beispiel mit der Tabellenzelle findest Du in Selfhtml, sonst kannst per span ein Leerzeichen vor Deinen Text setzen und ihm ein line-hight gleich der Höhe des Divs verpassen, dann funktioniert auch vertical-align für den Text direkt hinter dem Span, da es jetzt eine Bezugsgröße gibt.

Viele Grüße
Mathias Bigge

[Oliver L.]

Hallo Mathias,

danke für deine Hilfe, doch mein Problem hat sich noch nicht bis zur gänze gelöst. Kann man einem dive ein line height geben?
Bsp:

div.test1

{
height:100;
width: 100,
(bla, bla)
line-height: 100px;
vertical-align: middle;
}

Dies scheint nicht zu meiner Zufriedenstellung zu funktionieren. (es geht überhaupt nicht)
auch:
<span style=" height:100px; width:100px; line height:100px; vertical-align: middle;">

geht ebensowenig. Was mache ich hier falsch?

Bitte um weitere Lösungen,

Oliver L.

[Thomas J.]

Tag auch

Kann man einem dive ein line height geben?

Ja das geht. Du kannst aber auch dem Textabsatz eine Zeilenhöhe geben. Das nützt aber alles nichts, wenn Du bei den CSS-Angaben Fehler machst.

div.test1

{
height:100;   --- 100 was?
width: 100,   --- 100 was? Außerdem gehört da ein ; dahinter
(bla, bla)
line-height: 100px;
vertical-align: middle;   --- Das ist hier völlig fehl am Platze
}

auch:
<span style=" height:100px; width:100px; line height:100px; vertical-align: middle;">
geht ebensowenig.

Natürlich nicht.
Span ist ein Inline-Element. Da haben Breiten- und Höhenangaben nichts zu suchen.

Thomas J.

[Mathias Bigge]

Hi Oliver L.,

mal auf die Schnelle:

<div style="height: 100px; width: 200px; border: medium; background-color: Aqua;"><p style="vertical-align: middle;"><span style="line-height: 100px;"> </span>TEST</p></div>

Hab gerade keine Zeit, es zu testen, mecker, wenn's nicht klappt, ich gucke heute abend nochmal....

Und an die CSS-Gurus: Meckert, wenn's aus irgendwelchen Gründen Mist ist *g*

Viele Grüße
Mathias Bigge

[Oliver L.]

Danke, sieht sehr vielversprechend aus, allerdings habe ich eine andere Lösung gefunden. Doch sollte es nicht funktionieren, werde ich auf diesen Quelltext zurückgreifen,

danke,

Oliver L.

[Mathias Bigge]

Hi Oliver L.,

Danke, sieht sehr vielversprechend aus, allerdings habe ich eine andere Lösung gefunden.

Poste doch mal, welche...

Viele Grüße
Mathias Bigge

[Michael Jendryschik]

Man möge es Unfähigkeit nennen, doch ist es mir nicht möglich, den Text in einem Layer vertikal auszurichten. Weder vertical-align: middle, ... noch text-align: middle, ... funktioniert. Allerdings will ich es unbedingt mit Layern schaffen, und da die ganze Sache auch noch valid XHTML sein soll, mache ich alle Definitionen per Css.

Was verstehst Du unter vertikaler Ausrichtung?

Ich frage mich ständig, was hier immer unter "Layer" verstanden wird, wenn von HTML und/oder CSS die Rede ist.

MI

[Oliver L.]

Nun gut, da einige mich freundlich auf meine Schreibfehler hingewiesen, allerdings keine nützliche Hilfe geboten haben, werde ich alles mit dem richtigem Quellcode wiederholen.

Dieses line-height attribut am Ende der Definition will nicht funktionieren, ebenso wie das vertical-align.

Was mache ich falsch, gibt es andere Lösungen,

Danke für jede Hilfe, Oliver L.

div.test
{
height:25px;
width:140px;
border-bottom: 0px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
margin:0px;
background-color:#324F66;
color:#FFFFFF;
position:absolute;
top:100px;
left:500px;
text-align: center;
line-height: 25px;
vertical-align: middle;
}