Text vertikal mittig ausrichten

WIK-Lars · 15.05.07, 18:15

Hallo,

ich habe einen Text, der auf der gesamten Seite mittig - allerdings vertical, also nicht align="center" - ausgerichtet werden soll.
Kann ich das über den Body-Tag machen (ich glaube nicht)?

Danke für Vorschläge!

**Maik** · 15.05.07, 18:28

Hi,

hierfür müsste das umschliessende Blockelement im Viewport positioniert werden:

            
                    Code:
                  
                   	div.box {
position:absolute;
line-height:30px;
top:50%;
margin-top:-15px; /* negative Hälfte von line-height:30px */
border:1px solid red;
}

            
                    Code:
                  
                   	<body>
    <div class="box">vertikal zentrierter Text</div>
</body>

WIK-Lars · 16.05.07, 07:03

Hallo Michael,

leider funktioniert's so nicht.
Der Text wird jetzt nach ganz unten gedrückt.
Da müsste es doch auch noch einfachere Möglichkeiten geben, oder?

**Maik** · 16.05.07, 07:32

Hi,

bei mir wird der Text nicht nach unten gedrückt. Wie lautet denn der vollständige Quellcode (HTML + CSS) deines Dokuments?

WIK-Lars · 16.05.07, 11:26

Hallo,

es handelt sich um eine Seite, die als Navigation in einem Frame angezeigt wird. Auf der Seite sind quasi nur einzelne Navigationspunkte.

<head>
<title>Unbenannt</title>
<meta name="generator" content="Scribe! 2 [http://scribe.de]" />
<link rel="stylesheet" type="text/css" href="NEU.css" />
</head>

<body class=navi>
<a href="Seite1.html" target="main" class=navischrift>Navipunkt 1</a>

<a href=" Seite2.html " target="main" class=navischrift> Navipunkt 2</a>

<a href=" Seite3.html " target="main" class=navischrift> Navipunkt 3</a>

<a href=" Seite4.html " target="main" class=navischrift> Navipunkt 4</a>

<a href=" Seite5.html " target="main" class=navischrift> Navipunkt 5</a>

<a href=" Seite6.html " target="main" class=navischrift> Navipunkt 6</a>

<a href=" Seite7.html " target="main" class=navischrift> Navipunkt 7</a>

<a href=" Seite8.html " target="main" class=navischrift Navipunkt 8</a>

<a href="Kontakt.php" target="main" class=navischrift>Kontakt</a>

<a href=" Impressum.html " target="main" class=navischrift>Impressum</a>
</body>
</html>

In der zugehörigen CSS-class ‘navi’ steht bisher nur der Eintrag
.navi { background-image:url(HintergrundNavi_600 Kopie.jpg);},
weil die Navigation eben mit diesem bestimmten Hintergrundbild erscheinen soll.

soyo · 16.05.07, 11:33

Fehlt da nicht ein Dokumenten-Typ?

fabse111 · 16.05.07, 11:38

Hey du musst einfach die Häflte von der height und der width mit margin abziehen.

#main {
position: absolute;
left: 50%;
top: 50%;
height: 600px;
width: 1000px;
margin-left: -500px;
margin-top: -300px;
}

**Maik** · 16.05.07, 12:25

Wenn die Links in dem Fenster vertikal zentriert sein sollen, dann pack sie in ein DIV, verpass ihm die entsprechende Höhe, damit alle Links darin Platz finden, und positionier es im Viewport auf die Weise, wie ich es gestern und fabse111 heute demonstriert hat.

In meinem Beispiel wird dann aus der line-height-Eigenschaft die height-Eigenschaft, und den margin-top-Wert musst du dann natürlich auch dementsprechend anpassen, denn er beträgt die negative Hälfte von der Höhenangabe.

fabse111 · 16.05.07, 13:42

Besser hätte man es nicht erklären können...
Aber ich denke mit kompliziert meint er warum es nicht einfach ein vertical-align : center;
gibt. Das geht nämlich nicht da der Browser ja nicht weiß wie groß die Seite ist also wo die Seite endet. Center geht ja immer nur inline, da er das ganze ja an irgendwas ausrichten muss. Und da der Browser ansich keine Begrenzung hast musst du ihn zu seiner eigenen Größe zentrieren..
Hoffe man kann das ein wenig verstehen...