HTML/CSS Text zentrieren - Problem

Sankafahrer · 2. Juli 2012

Guten Tag liebe Community,
ich habe folgendes Problem:
Ich möchte bei diesem Header gerne den Text "THW Jugend Deggendorf" zentrieren (also quasi mittig zwischen den zwei THW Logos), allerdings haut das nicht so ganz hin.

Hier mal ein Screenshot:

Hier ist der HTML Code:

PHP

<div id="header">
			<div id="header_r">
                                <div align="left"><a href="index.php"><img src="images/logo.png" width="135" height="150" align="left" alt="Logo" /></a></div>
                                <div align="right"><a href="index.php"><img src="images/logo.png" width="135" height="150" align="right" alt="Logo" /></a></div>
				<div align=”center” id="logo"><a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div>
			</div>
		</div>

Und hier der CSS Code:

PHP

div#header_r {
	padding:0px 25px;
	text-align: center;
}


#logo {
	padding: 38px;
	text-align: center;
	height:85px;
}

Alles anzeigen

Ich hoffe ihr könnt mir weiterhelfen
Mit freundlichen Grüßen
euer BulletProof

//edit: Rechtschreibfehler

WoooWi · 2. Juli 2012

Code

div#header_r {
    padding:0px 25px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

So sollte es gehen.

Edit: Was vergessen

Sankafahrer · 2. Juli 2012

Zitat von WoooWi

Code

div#header_r {
    padding:0px 25px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

So sollte es gehen.

Edit: Was vergessen

Hab es nun so eingefügt, ändert sich aber leider gar nichts...

Padarom · 2. Juli 2012

Um eine Zeile zu sparen (nur der Schönheit wegen), kansnt du auch einfach "margin: 0 auto;" statt den beiden Margin-Zeilen schreiben.

edit: Das muss nicht in den div#header_r, sondern in den #logo-Teil.

Sankafahrer · 2. Juli 2012

Zitat von Padarom

Um eine Zeile zu sparen (nur der Schönheit wegen), kansnt du auch einfach "margin: 0 auto;" statt den beiden Margin-Zeilen schreiben.

edit: Das muss nicht in den div#header_r, sondern in den #logo-Teil.

Danke für den Tipp, klappt aber leider immer noch nicht nicht

WoooWi · 2. Juli 2012

Nehme mal das "div" vor "#header" raus.^^

Sankafahrer · 2. Juli 2012

Zitat von WoooWi

Nehme mal das "div" vor "#header" raus.^^

Funktioniert auch nicht, ich werd noch wahnsinnig

SSL · 2. Juli 2012

Gibt es eine Livedemo?

Sankafahrer · 2. Juli 2012

Zitat von SSL

Gibt es eine Livedemo?

Ja gibt es natürlich, hier der Link: http://thw.marco.server-free.de

//edit: Weiß keiner weiter?

TutNichts · 2. Juli 2012

Arbeite mit "width"

WoooWi · 2. Juli 2012

Nicht das Gelbe vom Ei aber sollte funktionieren...

Code

#header {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#middle {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#header #middle a {
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	text-align: center;
	display: block;
	height: 210px;
	width: 1267px;
	margin-right: auto;
	margin-left: auto;
}
#left {
	float: left;
}
#header #left a {
	height: 150px;
	width: 135px;
	text-align: center;
	background-image: url(images/logo.png);
	display: block;
	float: none;
}
#right {
	float: right;
}
#header #right a {
	background-image: url(images/logo.png);
	display: block;
	width: 135px;
	height: 150px;
}

Alles anzeigen

PHP

<div id="header">
  <div id="right"><a href="index.php"></a></div>
  <div id="left"><a href="index.php"></a></div>
  <div id="middle"><a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div>
</div>

Edit: Links

Sankafahrer · 2. Juli 2012

Vielen, vielen, vielen Danke WoooWi, so hat es jetzt endlich funktioniert

breadfish.de 11. März 2022