✔ img zentrieren in div

[msycho]

Hallo!

Ich krieg's nicht gebacken, das image in dem Container der ID "banner" zu zentrieren.

<div id="header">
    <div id="header_inner">
      <div id="path">blubb</div>
      <div id="banner"></div>
    </div>
  </div>

#header {
  height: 130px;
  background: url(../images/table_top_bg.gif);
}
#header_inner {
  width: 728px;
  margin: 0 25px;
}
#path {
  height: 40px;
}
#banner {
  height: 115px;
  text-align: center;
  background: url(../images/header_bg.gif);
}

Ich hab's auch schon mit der Block-Darstellung oder über "margin: 0 auto" etc. versucht - vergebens.

Kann mir wer weiterhelfen, bitte?

 

[Maik]

Hi,

ein img-Element kann ich im DIV #banner nicht entdecken :suspekt:

Falls aber das Hintergrundbild im DIV #banner horizontal zentriert werden soll, setz hierfür die background-position-Eigenschaft ein:

background: url(../images/header_bg.gif) center top;

 

[msycho]

Ich meinte das Hintergrundbild, sorry.

Aber dein Vorschlag ist ohne Wirkung.

 

[Maik]

Kann man sich das mal "live" anschauen, denn bei mir funktioniert's erwartungsgemäß einwandfrei.

 

[msycho]

Nein, sorry, ich hab momentan keine Möglichkeit.
Aber der Quellcode aus dem ersten Post ist alles - bis auf das restliche HTML-Grundgerüst - was ich momentan habe.

 

[Maik]

Dann pack mal alles (incl. der Grafiken) in eine ZIP-Datei und lad sie hier hoch - ansonsten wird's mit einer Fehlerdiagnose schwierig bis unmöglich.

 

[Maik]

Hallo Maik!

Ein Freund von mir hat es mal eben hochgeladen.
Du kannst das ganze hier anschauen:
http://www.***.de/xtestx/

Gruß und danke!

Okay, es werde Licht

Das Hintergrundbild lässt sich aus dem einfachen Grund nicht im DIV #banner horizontal zentrieren, da es dieselbe Breite besitzt ;-)

Vielmehr musst du das übergeordnete DIV #header_inner auf die bekannte Weise zentrieren:

#header_inner {
  width: 728px;
  margin: 0 auto;
}

 

[msycho]

Ähm, hmm, es passt! :suspekt:

Ich hatte das "margin: 0 auto" in #banner eingesetzt und nicht im übergeordneten!

Danke!