Frage zu Text Positionierung mit CSS

[insanity]

Hi @ll,
ich habe einen 500*400px DIV-Container erstellt,

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

wie ich den Text Horizontal zentriert ausrichte ist klar,

text-align:center

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

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]

das geht mit "line-height" und zwar genau mit dem Wert den du als Höhe angegeben hast.

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

 

[insanity]

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]

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]

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]

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...

und wie löst du das problem?

 

[atomfried]

und wie löst du das problem?

wie er es löst weiss ich nicht. ich löse es so...
lass die höhe vom div weg und mach padding-top und padding-bottom, solange bis es passt.

 

[insanity]

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]

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.

#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;
}

 

[Skeeve]

Also vllt etwas "umständlich", aber so geht das ohne herkömmliche Tabelle.

Wird aber nicht von jedem Browser verstanden. Auf der verlinkten Seite gibt es die Möglichkeit mit dem display Attribut rumzuspielen. Da kann man es dann ja mal rasch selbst ausprobieren.

 

[insanity]

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

 

[dahui]

what about

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

sehe abr grade dass der IE7 noch was angepasst werden muss
generell und brwoserübergeiffend ohne hacks wird wohl nur die tabelle helfen (MHO)

 

[floeschen]

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]

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