horizontal zentrieren funktioniert nicht

[Corraggiouno]

hi,

kann mir jemand sagen, warum mein horizontales Zentrieren bei der Überschrift h2 nicht funktioniert:

* {margin: 0px; padding: 0px;}

html 
{
height: 100.3%;
}

body 
{

font-family: "Times New Roman", Times, serif;
font-size:0.8em;
background: #ffffff;
color: #000000;
}


div#wrapper 
{
background:#000000;
width: 700px;
height:500px;
margin: 50px auto;
padding-top:10px;


}

h1
{
background: url(../images/headline.png) no-repeat;
height:155px;
text-indent: -999em;
}


ul#navigation
{
margin-top: -52px;
margin-left:220px;
}

ul#navigation li
{
display:inline;
float:left;
padding-left:40px;
}

ul#navigation a 
{
text-decoration:none;
}


ul#navigation a:link
{
text-decoration:none;
color:#ffffff;
}


ul#navigation a:visited
{
color:#ffffff;
}




ul#navigation a:hover
{
color:#ffffff;
}


h2
{
background: url(../images/turntable.png) no-repeat;
height:160px;
text-indent: -999em;
margin-top:50px;
}

div#maintext
{
background:#ffffff;
}

ul#msidebar
{
float:left;
width:200px;
clear:left;
margin-top:10px;
color:#ffffff;
list-style-type:none;
}

ul#msidebar li.head
{
background: url(../images/head_msidebar.gif) no-repeat;
padding-left:15px;
}

ul#msidebar li.middle
{
background: url(../images/middle_msidebar.gif) repeat-y;
height:200px;
padding-left:15px;
}

div#mcontent
{

float:left;
width:500px;
background:#FF0000;
margin-top:10px;
}

hier hat die Überschrift 2 einen rechten Abstand; möchte aber gerne das links und rechts der gleiche Abstand herrscht;
ph

 

[Trüffelkrieger]

Dann schreib in der CSS Datei einfach folgendes:

h2{
text-align:center;
}

Das entspricht der Zentrierung der Überschrift h2.

 

[ka9de]

Und falls du ein Blockelement zentrieren willst, brauchst du eine Breitenangabe.

 

[Corraggiouno]

mmh, habe das ganze so definiert:

h2
{
background: url(../images/turntable.png) no-repeat;
width: 698px;
height:160px;
text-indent: -999em;
margin-top:50px;
text-align:center;
}

leider funktioniert das aber nicht; ich habe nach wie vor einen Abstand rechts; links ist meine h2 ganz an den Rand geschoben!

 

[Elroy]

Gelöscht....

 

[ka9de]

h2 {
margin: 0 auto; hinzufügen
}

 

[threadi]

Lass text-indent weg.

 

[Corraggiouno]

super; vielen dank!
das mit dem margin: 0 auto; hat funktioniert

h2
{
background: url(../images/turntable.png) no-repeat;
width: 696px;
height:160px;
text-indent: -999em;
margin: 0 auto;
margin-top:49px;
}

Muss man das eigentlich bei Grafiken, die man mittig zentriert haben möchte immer so machen mit margin: 0 auto?

 

[mermshaus]

Wenn du mit Grafiken generell HTML-Elemente (block level) meinst: Ja, im Prinzip schon. Das ist die übliche Variante, eine „Box“ fester Breite horizontal im umgebenden Element zu zentrieren.