«
»

Das Zentrieren eines Bildes bzw. eines Elements

Das Zentrieren eines Elements ist eigentlich ziemlich einfach zu realisieren, da ich aber danach immer wieder gefragt werde, scheint es für manche doch ein Problem zu sein.
Deswegen habe ich mich entschlossen, hier einen kleinen Beispiel zum diesem Thema zu veröffentlichen.

<body style="text-align:center;">
   <div style="position:absolute; top:50%; margin-top:-50px; height:50px;
   left:50%; width:100px; margin-left:-50px;" >
      <div style="position:absolute; text-align:center;">
         <div style="height:100px; width:100px; background:red;"></div>
      </div>
</div>

Es ist zu beachten, dass margin-top bzw. margin-left der Hälfte des Wertes height bzw. width gleich sein soll.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Mixx
  • Google Bookmarks
  • LinkArena
  • Live
  • MisterWong
  • MisterWong.DE
  • Reddit
  • Technorati
  • Webnews.de
  • YahooMyWeb
  • Yigg

bild
Hausbau

Der Beitrag wurde am Freitag, den 22. Dezember 2006 um 15:37 Uhr veröffentlicht und wurde unter CSS, Tutorials und HowTo abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst zum Ende springen und einen Kommentar hinterlassen. Pingen ist im Augenblick nicht erlaubt.

9 Antworten zu “Das Zentrieren eines Bildes bzw. eines Elements”

  1. mobile games sagt:
    28. Februar 2007 um 12:41

    Diese Version finde ich zwar OK, aber die ist auch nicht perfekt, da die Zentrierung nicht 100% ist.

  2. Dave sagt:
    08. März 2007 um 13:11

    Die Lösung finde ich gut, schade nur, dass man so viel Markup hat.

  3. John sagt:
    08. März 2007 um 14:52

    Ich benutze auch diese Methode, um bestimmte Objekte zu zentrieren und ich kenne keine andere, die so gut funktioniert.

  4. Gordon sagt:
    09. März 2007 um 17:07

    Danke für die kleine HowTo, dieser Trick ist sehr nützlich für mich.

  5. PCMasters Hardware Forum sagt:
    26. März 2007 um 19:33

    Schöne Sammlung an Informationen bietest du den Usern hier. Du hast einen weiteren Stammbesucher und sehr nette Variation zum zentrieren eines Bildes.

  6. Karl sagt:
    20. Februar 2008 um 11:35

    Gute Lösung!

  7. Heinrich sagt:
    20. Februar 2008 um 11:47

    Es funktioniert und eine andere Methode brauche ich nicht.

  8. Michael sagt:
    20. Februar 2008 um 12:11

    Danke ;-)

  9. Auyana sagt:
    25. November 2008 um 09:05

    Über die CSS-Anweisung vertical-align kann man sehr einfach eine perfekte Zentrierung erreichen.

Hinterlasse eine Antwort