Text bzw. Absatz oder Blockelemente mit CSS vertikal ausrichten???

[orgonaut]

Ich suche mich jetzt schon seit Stunden im Internet zum Dodel. Ich war auf Selfhtml und auf jeder Menge schlauer Seiten bezüglich CSS. Sogar einen Thread mit genau meiner Frage habe ich in einem anderen Forum gefunden, nur eben leider ohne Lösung!

Hier ein weiteres meiner Fundstücke:

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.

Dass das nicht geht weiß inzwischen auch sehr gut, aber wie kann man diese Klippe umschiffen? Es muss doch noch einen anderen, besseren Weg geben als eine einsame Tabellen-Zelle zu erstellen???

Mein Ziel ist eine W3C konforme XHTML Seite auf der ich eine Blockelement (<div>; möglichst eines das nicht über eine genau festgelegte Höhe verfügen muss) nach allen Regeln der Kunst horizontal und vertikal zentriert habe und darin auch noch einen Text, ebenfalls horizontal und vertikal zentriert! -> Bitte das kann doch nicht so schwer sein!!!

Weitere gefundene Links:
http://www.stichpunkt.de/css/css-tipps.html#zentrieren
http://www.mediengestalter.info/forum/22/html-inhalt-in-der-mitte-zentrieren-ausrichten-17476-3.html
http://www.manuelbieh.de/www/blog/vertikal-zentrierte-seiten-mit-css
http://www.thestyleworks.de/tut-art/centerblock.shtml
…usw.

 

[Galanos]

Ich habe mir auch mal 'nen Wolf danach abgesucht.
Am einfachsten ist es noch, wenn dein <div> eine feste Hoehe in Pixeln hat, dann kannst du mit negativem Margin arbeiten:
- Elternelement mit 50% Padding-Top versehen
- dem <div> die negative Haelfte seiner Hoehe in Pixeln als Margin-Top geben

 

[orgonaut]

Ich habe mir auch mal 'nen Wolf danach abgesucht.
Am einfachsten ist es noch, wenn dein <div> eine feste Hoehe in Pixeln hat, dann kannst du mit negativem Margin arbeiten:
- Elternelement mit 50% Padding-Top versehen
- dem <div> die negative Haelfte seiner Hoehe in Pixeln als Margin-Top geben

Gut, wenn's nicht anders geht, dann verzichte ich eben auf Blockelemente mit variabler Höhe. Aber wie kann ich Text innerhalb eines Blockelements zentrieren? Im Augenblick mach ich das, recht pfuschig, über eine line-height: die genau der Höhe des <div> entspricht. Das Problem, verkleinert oder vergrößert man den Text, rutscht dieser trotz Pixelwerten aus der Mitte. Agrrr

Beispiel

Edit: Habe einen Ansatz gefunden um Blockelemente mit variabler Höhe auf einer Seite zu zentrieren. Leider zeigt Safari bei diesem Beispiel immer mindestens einen Scroll-Balken und das <div> wirkt nicht mehr zentral.

Edit: Inzwischen habe ich dank dieser Seite eine passable Lösung für mein aktuelles Problem gefunden.

Was mit aber immer noch nicht wirklich klar ist wie man Text innerhalb eines <div> vertikal zentriert. Ausserdem hat meine aktuelle Lösung den Nachteil, dass sich das Blockelemente in der Höhe mitändern muss, damit der Text zentriert bleibt.

Wäre sehr erfreut über eine passende Lösung dieser Problematik!

 

[2nd]

Was mit aber immer noch nicht wirklich klar ist wie man Text innerhalb eines <div> vertikal zentriert. Ausserdem hat meine aktuelle Lösung den Nachteil, dass sich das Blockelemente in der Höhe mitändern muss, damit der Text zentriert bleibt.

Wäre sehr erfreut über eine passende Lösung dieser Problematik!

Ich habe es mal so gelöst, dass ich den DIV-Container per "display"-Eigenschaft als Tabellenzelle darstellen lassen habe - so ging es. War allerdings Fummelkram und nicht sehr elegant.

Wir werden wohl auf CSS v3 warten müssen...

2nd

 

[Vanilla Bear]

Hallo allerseits,

ich hol den Thread mal aus der Versenkung, denn ich hab ein ähnliches Problem (oder glaub ich das zumindest, ich bin gerade erst dabei mir html/css anzueigenen)

Jedenfalls geht es um das Theme von meinem Tumblr-Profil (dieses hab ich nicht selbst geschrieben, sondern ein vorgefertigtes genommen, das ich jetzt abändere). Ich bekomme es einfach nicht hin, diesen einen vertikalen Abstand zu verkleinern (siehe Anhang)
Könnte mir bitte jemand auf die Sprünge helfen, wie man das am besten macht.
Hier noch der Link zum Problem: KLICK

 

[doger]

.post .content {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 0.5em solid #444444;
    margin-right: 23.5em;
    [COLOR="red"]min-height:[/COLOR] 7.2em;
    [COLOR="red"]padding:[/COLOR] 3em;
}

Das war aber schon mehr als Leichenschändung.
Sind die Werte die angepasst werden können um den Abstand zu verringern.

//doger

 

[Vanilla Bear]

Tausend Dank für die schnelle Hilfe, doger.