Bilder zentrieren

[.wired]

Hi, ich würde gerne ein paar Bilder zentrieren. und zwar sieht mein Code ungefähr so aus:

Code: Alles auswählen

<div class="navigation">
<div class="button"><img style="margin: 0px auto 0px auto;" src="_images/_navigation/home.gif" /></div>
<div class="button"><img style="margin: 0px auto 0px auto;" src="_images/_navigation/portfolio.gif" /></div>
<div class="button"><img style="margin: 0px auto 0px auto;" src="_images/_navigation/about_us.gif" /></div>
<div class="button"><img style="margin: 0px auto 0px auto;" src="_images/_navigation/contact.gif" /></div>
</div>

CSS:

.navigation{
  width: 100%;
}

.button{
  float: left;
  width: 25%;
}


Also ich will die Bilder (wie man dem Quellcode entnehmen kann, Navielemente) in einer Box mit variabler Breite zentrieren. text-align: center, align="center" schon ausprobiert, funktioniert nicht...

MfG .wired

[Matthias]

Ich würde sagen einfach so:

Code: Alles auswählen

<div class="navigation">
<div class="button" align="center><img src="_images/_navigation/home.gif" /></div>
<div class="button" align="center><img src="_images/_navigation/portfolio.gif" /></div>
<div class="button" align="center><img src="_images/_navigation/about_us.gif" /></div>
<div class="button" align="center><img src="_images/_navigation/contact.gif" /></div>
</div>

CSS:

.navigation{
  width: 100%;


Was sind das für Bilder, mach doch einfach eine Pixelleiste oder so und füll damit die Box aus.

MfG
Matze

[Ingo]

Hi, .wired.
Vllt. geht es ja mit display:inline und dann text-align:center, also wie folgt:

Code: Alles auswählen

  .navigation { width:100%; text-align:center; }
  .button { display:inline; }


Mit float:left ist -soeit ich das versucht habe- ein Zentrieren kaum noch möglich, es sei denn
man legt die Breite des zu zentrierenden Teils fest (dann margin auto für den Button-Block).

Wo ich's gerade sehe (und an einem CSS-lastigen Tut arbeite ;o): Die margin-Angabe in den
img-Tags wirkt nur zum Teil: Weil img ein Inline-Element ist, akzeptiert es keine auf die Breite
bezogenen Angaben.
Gruß, Ingo

PS: Vllt. kann man ja auch ganz auf die .button-divs verzichten und ggf. den imgs direkt eine
CSS-Klasse zuordnen bzw. sie direkt formatieren?

[Avedo]

Ich würde dir empfehlen keine ganzen Bilder zu nehmen. Ist sehr untaktisch, da die Buttoms bei einer anderen Auflösung verpixeln. Ich würde etwas zu große Hintergrundtreifen machen und dann Text vor diesen Hintergrund setzen. Zentrieren kannst du den Text mit textalign: middle.
Zudem bezweifel ich, dass das was du vor hast mit display:inline funktioniert, da das dafür zuständig ist, dass hinter den buttoms kein Zeilenumbruch ist, also die anderen buttoms nebeneinander stehen.
Am besten wäre es, wenn du uns sagst, ob du ein Zwei- oder Drei-Spalten-Layout machen willst oder ob es eine Top-Navigation werden soll, ob die Buttoms neben einander oder übereinander stehen. Dann können wir dir besser helfen.
Mfg, Andy

[.wired]

Ingo lebe hoch, es funktioniert thx again

MfG .wired