Frage zu Text Positionierung mit CSS

insanity

Klarapfel
Registriert
06.07.06
Beiträge
277
Hi @ll,
ich habe einen 500*400px DIV-Container erstellt,

Code:
<div style="width:500px; height:400px">Inhalt</div>

wie ich den Text Horizontal zentriert ausrichte ist klar,

Code:
text-align:center

aber wie kann ich ihn Vertikal ausrichten? Hab's mit

Code:
vertical-align:middle

probiert aber erreiche damit nicht das gewünschte Ergebnis. Wichtig ist halt das der Text egal wie groß er nun wird immer genau zentriert dargestellt wird. Geht sowas? Sonst muss ich wohl doch wieder auf Tabellen zurück greifen. Damit funktioniert es einwandfrei. :)
 

Ultrasonic

Reinette de Champagne
Registriert
09.12.06
Beiträge
417
das geht mit "line-height" und zwar genau mit dem Wert den du als Höhe angegeben hast.

Code:
<div style="width:500px; height:400px; line-height: 400px;">Inhalt</div>
 

insanity

Klarapfel
Registriert
06.07.06
Beiträge
277
danke, das funktioniert zumindest schonmal wenn es sich nur um eine zeile handelt, aber sobald der text länger wird und mal über 2, 3 oder auch 6 zeilen geht funktiniert es leider nicht. trotzdem danke für die schnelle antwort
 

Ultrasonic

Reinette de Champagne
Registriert
09.12.06
Beiträge
417
danke, das funktioniert zumindest schonmal wenn es sich nur um eine zeile handelt, aber sobald der text länger wird und mal über 2, 3 oder auch 6 zeilen geht funktiniert es leider nicht. trotzdem danke für die schnelle antwort

Das hattest du nicht dazu gesagt. Ich bin von "Inhalt" ausgegangen. Bei mehrzeiligen Text muss ich passen, jedoch weiss ich, dass es hier einen Beitrag zu gibt. Ich glaub "stk" hat da was zu geschrieben. Einfach mal suchen.
 

floeschen

Horneburger Pfannkuchenapfel
Registriert
13.08.06
Beiträge
1.402
Soweit ich weiss, kann man das "vertical-align"-Attribut nur bei Tabellen, in TD-Tags, brauchen. Ausserhalb funktioniert es nicht. Schade! Ich brauchte es eben auch immer wieder...
 

insanity

Klarapfel
Registriert
06.07.06
Beiträge
277
ok, aber dann bin ich ja leider wieder nicht flexibel falls sich die zeilenzahl des textes ändert, was leider häufig der fall sein wird. :( ich denke dann werd ich wohl um eine tabelle nicht herum kommen?
 

FirePot

Gast
Also vllt etwas "umständlich", aber so geht das ohne herkömmliche Tabelle. Dank der Display Eigenschaft von CSS, damit kann man solche Probleme meistens Lösen. Außer, dass dann hier noch ein zweiter Layer notwendig ist, auf den die Eigenschaften angewendet werden, die normalerweise auf das ursprüngliche Block-element angewendet werden.

Code:
#umTestHerum {
    position: absolute;
    left: 300px;
/*Alle Block EIgenschaften hier herein*/
}
#Test {
    background: #fff;
    padding: 50px;
    height: 200px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
}
 

insanity

Klarapfel
Registriert
06.07.06
Beiträge
277
hmm, also ich denke dann bin ich eventuell mit den tabellen noch schneller zu werke? ;) schade das css diese möglichkeit nicht direkt bietet. trotzdem dank an alle
 

floeschen

Horneburger Pfannkuchenapfel
Registriert
13.08.06
Beiträge
1.402
und wie löst du das problem?
Ich versuche das Problem gar nicht erst entstehen zu lassen, sprich: Ich organisiere meine Designs so, dass ich das nicht brauche. Dazu muss ich allerdings auch sagen, dass meine Codierkenntnisse recht rudimentär sind, wie meine Website zeigt. ;)
 

pepi

Cellini
Registriert
03.09.05
Beiträge
8.740
Quasi OT: css gehört sinnvollerweise nicht inline ins Markup, sondern in ein eigenes File.

Der komplette Code (Markup und Style) zum Ansehen und ausprobieren wäre nett. Hast Du die Möglichkeit das Zeug auf einen (halb)öffentlichen Server zu stellen oder hier zu posten?
Gruß Pepi