HTML vertikal zentrieren

Verfasser Nachricht

eret12

Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status: offline

Beitrag: #1

HTML vertikal zentrieren

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

09.03.2013 14:29

BounTyOnline

Beiträge: 1.811
Bewertung: 3
Registriert seit: Oct 2008
Status: offline

Beitrag: #2

RE: HTML vertikal zentrieren

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;

}

Hat der Beitrag dir gefallen?!? Biggrin
↓↓↓↓↓↓↓↓ Smile Danke

09.03.2013 14:33

Dennis

Beiträge: 1.306
Bewertung: 6
Registriert seit: May 2009
Status: offline

Beitrag: #3

RE: HTML vertikal zentrieren

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.

09.03.2013 14:45

eret12

Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status: offline

Beitrag: #4

RE: HTML vertikal zentrieren

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

09.03.2013 15:14

Dennis

Beiträge: 1.306
Bewertung: 6
Registriert seit: May 2009
Status: offline

Beitrag: #5

RE: HTML vertikal zentrieren

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%

Dieser Beitrag wurde zuletzt bearbeitet: 09.03.2013 15:27 von Dennis.

09.03.2013 15:17

Aaron

Beiträge: 3.413
Bewertung: 33
Registriert seit: Oct 2010
Status: offline

Beitrag: #6

RE: HTML vertikal zentrieren

<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]

Portfolio: [Link: Registrierung erforderlich]

Projekte
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]

09.03.2013 15:27

Maurice

Beiträge: 1.341
Bewertung: 7
Registriert seit: Jun 2007
Status: offline

Beitrag: #7

RE: HTML vertikal zentrieren

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>

Mit freundlichen Grüßen
Maurice

Dieser Beitrag wurde zuletzt bearbeitet: 09.03.2013 15:38 von Maurice.

09.03.2013 15:34

eret12

Beiträge: 1.130
Bewertung: 29
Registriert seit: Jun 2008
Status: offline

Beitrag: #8

RE: HTML vertikal zentrieren

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

09.03.2013 16:32

Baumstrukturmodus | Brettstrukturmodus

« Ein Thema zurück | Ein Thema vor »

Möglicherweise verwandte Themen...
Thema:		Verfasser	Antworten:	Ansichten:	Letzter Beitrag
	Hilfe bei HTML Schnipsel	MaXxXaM	7	3.115	28.03.2019 00:33 Letzter Beitrag: BounTyOnline
	Ein wenig Hilfe bei PHP / HTML	wahke	5	2.394	16.02.2019 07:41 Letzter Beitrag: wahke
	WP HTML Template in Theme einbinden	Invisible	4	2.297	13.11.2017 12:13 Letzter Beitrag: Invisible
	PhP / HTML Frage Bildergalerie?	HardwareNow	4	2.324	27.07.2017 13:14 Letzter Beitrag: GYJohn
	Frage TextFeld HTML ?	HardwareNow	1	2.028	06.12.2016 12:46 Letzter Beitrag: Muetzus

Druckversion anzeigen
Thema einem Freund senden
Thema abonnieren
Thema zu den Favoriten hinzufügen