Vertikale Textausrichtung mit CSS

Hallo,

ich habe in den body-Tag einer Seite class=home geschrieben und in der CSS-Datei steht dann: .home { vertical-align:middle; }. Dies sollte eigentlich die Schrift im entsprechenden Frame-Fenster auf der Homepage von oben nach unten (also vertikal) gesehen in die Mitte rücken. Leider passiert gar nichts!

Woran kann das liegen?

Ich habe weiter unten noch über mehrere div-Tags weitere CSS-Klassen eingerichtet, die Text horizontal ausrichten, Schriftfarbe und Schriftgröße ändern. Eigentlich dürfte dies aber doch keinen Einfluss haben.

Natürlich könnte ich jetzt den Text der Seite auch mit margin-top nach unten ausrichten. Aber es muss doch einfach über vertical-align funktionieren.

Please help! Vielen Dank für Deine Antwort!

Gruß, Lars

Hallo, lars
ich denke der knackpunkt besteht daran das
vertical-align mehrere NEBENEINANDER stehehende elemente relativ
zu einander ausrichtiet. das heist du brächtest noch ein element
mit der höhe 100% vor und dann ein zweites element was den auf mitte zu
stellendne text enthält:

hier meine demo style definitionen:
.p100 { width: 10px; height: 100%; vertical-align: middle; border: solid 3px #f00 }
.home { border: solid 10px #00f }

im body sieht das dann wie folgt aus:

x
test text

den border hab ich natürlich nur gemacht damit man sieht wie sich die beiden elemente zu einander verhalten. gruss chris

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Hi,

ich habe in den body-Tag einer Seite class=home geschrieben
und in der CSS-Datei steht dann: .home {
vertical-align:middle; }. Dies sollte eigentlich die Schrift
im entsprechenden Frame-Fenster auf der Homepage von oben nach
unten (also vertikal) gesehen in die Mitte rücken. Leider
passiert gar nichts!

Genau das soll auch passieren. vertical-align ist nicht das valign der Tabellen, und funktioniert so wie es soll.
http://www.w3.org/TR/CSS21/visudet.html#propdef-vert…
http://www.css4you.de/vertical-align.html
http://de.selfhtml.org/html/tabellen/gestaltung.htm#…
http://de.selfhtml.org/css/eigenschaften/ausrichtung…

Natürlich könnte ich jetzt den Text der Seite auch mit
margin-top nach unten ausrichten. Aber es muss doch einfach
über vertical-align funktionieren.

Wie gesagt, nein, weil body keine Tabelle ist.
Eine Lösung zur mittigen Ausrichtung findest Du hier, aber ohne container-div würde ich das nicht machen.
http://www.jakpsatweb.cz/css/css-vertical-center-sol…

Schönen Gruß,
Rudy

Hallo Chris,

erstmal vielen Dank für Deine Antwort!
Leider haut das

hier meine demo style definitionen:
.p100 { width: 10px; height: 100%; vertical-align: middle;
border: solid 3px #f00 }
.home { border: solid 10px #00f }

im body sieht das dann wie folgt aus:

x
test text

irgendwie gar nicht hin. Da wird dann erst ein roter Rahmen ellenlang angezeigt und wenn ich dann weiter runter scrolle (eigentlich ist auf der Homepage gar kein Scrollbalken gewünscht) erscheint dann der Testtext im blauen Kasten.

Wahrscheinlich ist es dann doch einfacher, den gesamten Text per div in eine Unterklasse zu setzen und diese dann mit margin-top auszurichten, oder? Ich weiß nur nicht, ob bei margin auch alle Browser gleich anzeigen, oder ob ich jetzt alles schön mit dem IE zusammenbaue und wenn ich’s mir dann später auf anderen Browsern angucke ist alles wieder verrückt( im wahrsten Sinne des Wortes :wink: ).

Gruß, Lars

Hi Rudy,
auch Dir schönen Dank für Deine Antwort.
Der Vergleich mit table war hervorragend. Leuchtete mir doch gleich ein!

Genau das soll auch passieren. vertical-align ist nicht das
valign der Tabellen, und funktioniert so wie es soll.
http://www.w3.org/TR/CSS21/visudet.html#propdef-vert…
http://www.css4you.de/vertical-align.html
http://de.selfhtml.org/html/tabellen/gestaltung.htm#…
http://de.selfhtml.org/css/eigenschaften/ausrichtung…

Aber dann das:

Eine Lösung zur mittigen Ausrichtung findest Du hier, aber
ohne container-div würde ich das nicht machen.
http://www.jakpsatweb.cz/css/css-vertical-center-sol…

Ist ja alle inglisch ;o
OK, wenn ich mich einlese geht das schon :wink:

Aber ich habe die Verwendung von CSS ganz anders gelernt. Ich lagere alle CSS-Befehle in Unterklassen in eine eigene CSS-Datei aus. Diese brauche ich dann nur noch im head der jeweiligen Seite „anzumelden“.
Deswegen fällt es mir schon etwas schwer, Deinen angegebenen Beispielen zu folgen. Was zum Teufel macht z.B. style=… Habe ich ehrlich noch nie benutzt und gerade in einer Referenz auch nicht gefunden!

Ich probier’s trotzdem weiter.

Gruß, Lars

Hi Lars,

Ist ja alle inglisch ;o

Tja… :wink:

OK, wenn ich mich einlese geht das schon :wink:
Aber ich habe die Verwendung von CSS ganz anders gelernt. Ich
lagere alle CSS-Befehle in Unterklassen in eine eigene
CSS-Datei aus. Diese brauche ich dann nur noch im head der
jeweiligen Seite „anzumelden“.

Schau beim Beispiel unten bei „Let’s make it structural and without hacks“, dort ist es mittels eines CSS-Style-Blocks erklärt. So kommst Du auch ohne den Underscore-Hack aus und machst Dir stattdessen den mangelnden CSS-Support des IE6 zu Nutze (#element[id] wird vom IE übergangen). Es gibt eben immer viele Wege nach Rom. Der in den Beispielen davor verwendete Hack ist der Underscore-Hack http://wellstyled.com/css-underscore-hack.html - er ist für IE6 so zuverlässig wie Star-HTML http://www.info.com.ph/~etan/w3pantheon/style/starht… Allerdings wird der Star-HTML Bug offiziell in den IE7 übernommen (Quelle IE-Blog), zum Underscore-Hack haben sich die Projektleiter noch nicht geäußert. Es wird Dir so oder so kaum etwas übrig bleiben als die Seite in der neuen IE-Version zu prüfen, ob alles noch läuft oder nun plötzlich die Hälfte erkannt und dadurch fehlinterpretiert wird.

Deswegen fällt es mir schon etwas schwer, Deinen angegebenen
Beispielen zu folgen. Was zum Teufel macht z.B. style=…

‚style‘ ist die Eigenschaft eines jeden HTML-Elements zur Angabe der CSS-Attribute direkt im HTML-Attribut. Diese Methode heißt Inline CSS - du kannst danach googlen, beispielsweise http://www.ksl.mediendesign.eduhi.at/ts/htmltut/kapi…

Habe ich ehrlich noch nie benutzt und gerade in einer Referenz
auch nicht gefunden!

In dem Beispiel von Yuhu ist es so realisiert, um den Code lesbarer zu machen. Style-Angaben in den Attributen machen das Markup länger und sind nicht mehrfach nutzbar. Es ist deshalb auch besser, ein Stylesheet zu definieren oder einen Style-Block im Head zu machen und stattdessen Klassen oder IDs zu vergeben, so wie Du es machst.

Schönen Gruß,
Rudy

Hallo Lars,
Ja wenn du mehrer elemente hast ist das mit dem prozentuellen mittig
ausrichten nicht mehr so einfach.

mit dem margin solltest du keine probleme bekommen.

nur falls du padding verwendest solltest du daran denken das sich der IE nicht
css conform bei der breiten angabe verhält

css sagt: gesamtbreite des elementes = width + padding
IE macht: gesamtbreite des elementes = width

wodurch elemente im firefox (und andere css conformen browsern) um das padding breiter sind.

aber beim margin gibts das problem zum glück nicht.

gruss chris

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Da gibt es aber entsprechende hack’s für, einfach mal in google

width padding IE hack

eingeben und ein paar Seiten druchschauen, da findest du die Lösung, wie es dann auch im IE funktioniert…

Danke Für den tip :wink:
gibt ja für fast jedes problem einen Hack oder Work-a-round.
Gruss chris

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]