Sponsor-Board.de

Hi,

ich habe Folgendes Problem und habe bisher keine Lösung finden können.

Ich habe eine div mit Rahmen erstellt. In der div möchte ich mit <a></a> einen Text ausgeben, der vertikal und horizontal zentriert ist.
Horizontal ist es kein Problem, das geht mit text-algin: center; ohne Probleme.
Nur das vertikal zentrieren funktioniert nicht!

Ich habe es mit vertical-align:middle; in der CSS und im <a> Element selbst in der style Einstellung… beides ohne Erfolg…

Weiß jemand wie ich das hinbekomme?

Hier noch der Code der CSS:

PHP-Code:

#gruppe_2 {
    margin-top: 1023px;
    margin-left: 460px;
    height: 50px;
    width: 200px;
    border: 1px solid;
    position: absolute;
    z-index:2;
    text-align: center;
    vertical-align:middle;
} 

Hier HTML:

PHP-Code:

<div id="gruppe_2"><a style="font-size:20px; color:#ED1C24;"><b>Gruppe 2</b><br></a></div> 

Lg eret12

bin mir nimmer sicher ob 0px; oder auto;
aber ich mein es war auto:

Code:

#gruppe_2 {

    margin: auto;

    height: 50px;

    width: 200px;

    border: 1px solid;

    position: absolute;

    z-index:2;

    text-align: center;

    vertical-align:middle;

}

wenn du für den div-Container eine feste Größe hast, kannst du probieren für den a-Tag mit margin-top:50% etwas zu erreichen.

Hi,

Danke für die Antworten!

Leider geht alles nich -.-

Hab rausgefunden, dass vertical-align:middle; nur in der Zeile zentriert...
Somit kann man das nur in einer Tabelle anwenden...

Aber es muss doch möglich sein den Text in einer div zu zentriernen...

Lg eret12

probier mal nur top:50%
oder täusch dem Container einen 50%igen Inhalt vor, indem du da nochmal einen container reinsetzt mit width 100% und height 50%

<div id="distance"></div>
<div id="container">inhalt</div>

html, body {height:100%;}
#distance { width:1px; height:50%; margin-bottom:-115px; /* hälfte der Höhe vom container*/ float:left; }
#container { width:400px; clear:left; position:relative; height:230px; padding:0; margin:0 auto; }

Beispiel : [Link: Registrierung erforderlich]

Wenn es sich nur um 1 Textzeile handelt und eine feste Höhe besitzt, würde ich es so versuchen:

Code:

<div style="border:#b5b3b3 1px solid;width:250px;height:200px;line-height:200px;text-align:center;">

<a href="#">test</a>

</div>

Hi,

Danke für die Antworten!

die Kombination von line-height und vertical-align:middle funktioniert!

@GeekishGames:
text-align: center; ist für die horizontale zentrierung zuständig Wink

Lg eret12

eret12

BounTyOnline

Dennis

eret12

Dennis

Aaron

Maurice

eret12