✔ Text in eine DIV-Box mittig setzen

[Grille]

Hallo,

meine Suche hier war nur mäßig erfolgreich, daher frage ich doch nochmal.

Ich habe eine div-box mit einer Breite von 150 und einer Höhe von 50. Der Text der in der Box steht soll in der mitte stehen ... sowohl hozizontal wie auch vertikal ... und das natürlich browserübergreifend.

ich habe nun schon versucht den text selbst auch noch einmal in eine div-box zu stetzen und diese dann dazu zu bringen oben und unten halbwegs gleiche Abstände einzunehmen:
margin-top: 50%; margin-bottom: 50%;
oder
margin-top: auto; margin-bottom: auto;

hat aber nichts gebracht.

auch diese Klasse ist sinnlos:
.middle { vertical-align:middle}

bin für jeden tipp dankbar
Grille

 

[Maik]

Hi,

wenn es sich hierbei um einen einzeiligen Text handelt:

div#box {
width:150px;
line-height:50px;
text-align:center;
}

 

[Grille]

ja .. das ist genau das Problem .. der Text soll das DÜNAMÜSCH eingefügt werden. daher sinds auch mehrzeilige Texte.

 

[Maik]

div#box {
width:150px;
height:50px;
display:table-cell;
vertical-align:middle;
text-align:center;
}

Das Stylesheet funktioniert in allen Browsern, außer dem IE (bis einschliesslich Version 7), da er die Tabellenwerte zur display-Eigenschaft nicht unterstützt, und somit vertical-align:middle nicht greift.

 

[kalle123456]

Hallo,

schaue mal hier http://forum.de.selfhtml.org/archiv/2003/6/t49499/

Gruss

 

[Maik]

schaue mal hier http://forum.de.selfhtml.org/archiv/2003/6/t49499/

Was sich dann mit meinem letzten Posting deckt, und keine neuen oder alternativen Techniken bereithält, die im IE zu einem zufriedenstellenden Ergebnis führen.

 

[Grille]

danke ...

schade dass es da nicht wirklich eine Lösung gibt.
Wird das mit dem IE8 anders? Habe gehört da gibt es schon eine Beta. Hast du damit Erfahrung Maik?

sonst nochmals vielen Dank.

 

[kalle123456]

nehme doch einen css hack Stichwort Browserweiche, wenn IE dann nimm valign="" ist zwar veraltet und soll eigentlich in modernen Browsern nicht mehr interpretiert werden. Aber glaube mir CSS baut darauf auf...

Gruss

 

[Maik]

nehme doch einen css hack Stichwort Browserweiche, wenn IE dann nimm valign="" ist zwar veraltet und soll eigentlich in modernen Browsern nicht mehr interpretiert werden. Aber glaube mir CSS baut darauf auf...

Und du glaubst, dass das HTML-Attribut valign im <div>-Tag den IE beeindruckt? Und wo ist da jetzt der "CSS-Hack"?

 

[kalle123456]

sorry das ist keiner, logisch meinte ja nur solange der Browser den Style nicht interpretieren kann, versuchen auf alte Attribute zu setzen. Habe mich bisschen komisch ausgedrückt. Um den Text natürlich noch einen Inline Tag.

Gruss