Problem beim Textausrichten

[Jan-Frederik Stieler]

Hi,
ich möchte einen zwei Zeiligen Text in einem Div mittig positionieren. Dazu habe ich mir diese Klasse erstellt:

.zentriertertxt {text-align:center; display:block; vertical-align:middle; line-height:330px;}

damit das funktioniert habe ich line-hight als Höhenwert verwendet damit der Browser weiß wie hoch das ist um es mittig auszurichten. Das Problem ist nur das dann auch der Abstand der beiden Zeilen 330px groß wird.
Gibt es noch eine andere Angabe die ich verwenden kann. Mit height funktioniert das nicht.

Gruß

 

[Maik]

Probier mal Folgendes:

* {
margin: 0;
padding: 0;
}

.zentriertertxt {
text-align: center;
height: 330px;
font-size: 12px;
}

.zentriertertxt span {
display: block;
position: relative;
top: 50%;
margin-top: -14px;
}

<!-- mit p-Element -->

<div class="zentriertertxt">
     <span><p>Zeile 1</p><p>Zeile 2</p></span>
</div>


<!-- mit br-Element -->

<div class="zentriertertxt">
     <span>Zeile 1<br>Zeile 2</span>
</div>

 

[Jan-Frederik Stieler]

Danke das hatt funktioniert! Jedoch nur im FF, im IE wird das "Herzlich Willkommen" wegen dem negativen margin-top nicht angezeigt. Bisher war mir noch nicht bekannt das der IE Probleme mit negativen Angaben hatt.
Also wenn ich den Wert rausnehme wird die Zeile wieder angezeigt.

Gruß

 

[Maik]

Bei mir werden die beiden Zeilen im IE (6.0, Win2k) einwandfrei angezeigt.

Zeig doch bitte mal den vollständigen Quellcode der Seite (HTML + CSS).

 

[Jan-Frederik Stieler]

Hi, gleiche Sache wie beim Submenüproblem. Warscheinlich ist die beta3 vom IE7 schuld, auf den anderen funktionierts.

Gruß