+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: HTML vertikal zentrieren (/showthread.php?tid=36618)
HTML vertikal zentrieren - eret12 - 09.03.2013 14:29
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
RE: HTML vertikal zentrieren - BounTyOnline - 09.03.2013 14:33
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;
}
RE: HTML vertikal zentrieren - Dennis - 09.03.2013 14:45
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.
RE: HTML vertikal zentrieren - eret12 - 09.03.2013 15:14
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
RE: HTML vertikal zentrieren - Dennis - 09.03.2013 15:17
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%
RE: HTML vertikal zentrieren - Aaron - 09.03.2013 15:27
<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]
RE: HTML vertikal zentrieren - Maurice - 09.03.2013 15:34
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>
RE: HTML vertikal zentrieren - eret12 - 09.03.2013 16:32
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
Lg eret12