CSS Frage - Kasten mit mehrzeiligen Text -zentriert & mi

    Hallo,

    vllt kann mir der ein oder andere bei meinem CSS Problem helfen bitte..

    Ich habe einen Kasten:

    Code
    <div class="kasten">mit mehr zeiligen text</div>

    Die CSS Klasse dazu sieht so ungefähr aus:

    Code
    .kasten {
  height: 50px;
  width: 50px;
  border: 1px #000000 solid;
  line-height: 50px;
  text-align: center;
  vertical-align: middle;
}

    Problem: Ich brauch den Text mehrzeilig (autom. Zeilenumbruch), zentriert und mittig in dem Kasten ohne Zeilenabstand. Leider greift anscheinend vertical-align nur mit line-height oder display: table-cell! Ich will aber auch keine Tabelle verwenden. Die Klasse wird für verschiedenen Text verwendet. Wie löst man das am elegantesten? Danke für euere Antworten! 8)

    Für die nächste Zeit erstmal inaktiv.

    vertical-align funktioniert nur bei Inline-Elementen. Wenn ich dich richtig verstanden habe, wäre eine Textarea die Lösung für dich.

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

    Im Prinzip so, wie du es schon hast:

    Code
    textarea {
  height: 50px;
  width: 50px;
  border: 1px #000000 solid;
  text-align: center;
  vertical-align: middle;
}
    Code
    <textarea>Mein langer Text</textarea>

    evtl. musst du den CSS-Teil noch etwas erweitern, um die Textarea an dein Design anzupassen.

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

    Tja, funktioniert nicht.

    Auf css4you steht, dass vertical-align nur mit Inline-Elementen funktioniert und Textarea ist ein Inline-Element. Hätte also passen sollen. Scheint aber so, als müsste ich jetzt passen. Aber ich such noch ein bißchen weiter, vielleicht finde ich noch was.

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

    Meine Suche hat jetzt folgendes ergeben:

    vertical-align scheint wirklich nur in Tabellen zu funktionieren.

    line-height bringt nur was bei einem einzeiligen Text.

    Mit margin-top kannst du einen Abstand von oben festlegen und das Ganze dann pi*Auge selber zentrieren.

    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable