CSS Frage - Kasten mit mehrzeiligen Text -zentriert & mi

analogprinz

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!

Dikra

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

analogprinz

danke für deine antwort.. wie würde denn dann der code aussehen?

Dikra

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.

analogprinz

danke.. hm aber mach mal width & height auf 70px, dann steht der text im IE7 wieder nur oben..

Dikra

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.

Dikra

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.

analogprinz

hi, danke! son mist. leider wird der inhalt des kasten dynamisch gefüllt..

CSS Frage - Kasten mit mehrzeiligen Text -zentriert & mi

Tags

Benutzer online in diesem Thema