Zur Machart Studios Website
Back to top

Bilder vertikal zentrieren (CSS)

Wenn man im HTML Bilder vertikal zentrieren will, steht man doch des Öfteren vor der Frage:
„Wie mache ich das denn jetzt ohne Tabellen?“ –  So geht das ganz einfach im CSS.

Um ein Bild horizontal zu zentrieren benötigen wir nicht viel mehr als das Bild selbst:

<img src="beispiel.jpg" alt="Horizontal zentriert" />

und ein wenig CSS:

img {
    width: 250px;
    margin: 0 auto 0 auto;
}

Bilder vertikal zentrieren

Um ein Bild nun vertikal zu zentrieren benötigen wir folgenden CSS-Schnipsel:

img {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
}

Nun sitzt die linke obere Ecke des Bildes genau in der Mitte des darüber liegenden Elements. Um gewährleisten zu können, dass das Bild an sich zentriert ist, müssen wir unseren Code erweitern:

img {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -125px;
}

Nun haben wir das Bild um die Hälfte seiner Höhe und die Hälfte seiner Breite nach oben, beziehungsweise nach links verschoben und das Bild ist absolut zentriert. Doch was müssen wir tun, wenn wir die Höhe des Bildes nicht kennen und dennoch Bilder vertikal zentrieren wollen?

Dynamische Bildhöhen

Jeder der schon einmal versucht hat ohne Tabellen Bilder mit unterschiedlichen Höhen vertikal zu zentrieren, kennt das Problem. Für die Lösung gibt es diverse Ansätze: Sei es über jQuery, line-height und vertical-align oder über den Photoshop-Way – Ich zeige hier eine Variante mit einem zusätzlichen Element als Ausrichtungshilfe auf.

href=““>

Nun haben wir erst einmal ein Div als „Rahmen“ um unser Bild. Hierin befindet sich zusätzlich ein span und unser Bild innerhalb eines Links.
Mit dem folgenden CSS-Code zentrieren wir unser Bild vertikal:

div {
    width: 250px;
    height: 250px;
    text-align: center;
    border: 1px solid #88f;
}
span {
    width: 10px;
    height: 100%;
    display: inline-block;
    margin-left: -10px;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    border: 0 none;
    max-width: 250px;
}

Nun ist egal, in welchem Format oder in welcher Größe unser Bild vorliegt, es ist in jedem Fall horizontal wie vertikal zentriert. Ihr seht also, Bilder vertikal zentrieren zu wollen, erfordert keine Meisterhandgriffe.

Und jetzt Ihr!

Natürlich war das hier nur eine von mehreren Varianten. Wenn ihr andere Ideen, Vorschläge oder Anregungen habt, wie man Bilder vertikal zentrieren kann, dann ab damit in die Kommentare. Außerdem empfehlen wir euch noch den Blogbeitrag zu CSS Prism, dem nützlichen Web-Tool, mit dem ihr bestimmen könnt, ob all eure Farben tatsächlich den gleichen Farbwert haben.

So können Bilder hervorragend zentriert werden

Unser Best Practise: So können Bilder hervorragend vertikal und horizontal im CSS zentriert werden

Von Matthias Jochim

Nach dem Abitur absolvierte Matthias Jochim ein Studium im Fachbereich Kommunikationsdesign an der Hochschule Mannheim mit dem Abschluss Bachelor of Arts. Seinem Interesse am Webdesign und der großen Leidenschaft für 3D-Modeling frönt Matthias Tag für Tag bei Machart Studios. Ein weiterer Schwerpunkt seiner Arbeit liegt auf der Gestaltung und Umsetzung klassischer Medien.

12 Kommentare

  1. 5. Juni 2013 Eduard Weber Antworten

    Wenn man das Bildmotiv schon in der richtigen Größe vorliegen hat dann kann man es auch einfach als Hintegrundbild (background-image:url(…) center center) einbinden. Geht aber natürlich nur wenn das Bild immer auch in den Rahmen hineinpasst und nicht größer ist/sein kann (Serverseitig).

  2. 8. Juli 2013 Jonathan Remmers Antworten

    Hatte genau das Problem, dass meine Bilder verschiedene Größen hatten, aber mit letzter hier vorgestellter Option habe ich alles zentriert bekommen.

  3. 18. Juli 2013 heiner Antworten

    Zentriert weder vertikal noch horizontal in FF, ,Chrome und IE 🙁

    • 2. August 2013 Eduard Weber Antworten

      Bitte Code posten, dann können wir den Fehler besser finden. Sollte eigentlich klappen.

      • 5. August 2013 Manuel Bachl

        Zur Veranschaulichung habe ich hier nochmal eine Testseite gebaut. Ich habe die Seite im IE, FF, Chrome und Safari getestet (jeweils die aktuellsten Versionen)

  4. 9. November 2013 oliver Antworten

    Ich denke Einfacher geht es so:

    img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }

    Zentriert das Bild horizontal und vertikal – ohne Rechnerei und ohne die Größe des Bildes zun kennen.

  5. 4. Mai 2014 Diego Antworten

    Das ist super:

    img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }

    das hat mir endlich weitergeholfen, alle anderen Versuche mein Bild innerhalb eines div Containers vertical zu zentrieren haben nicht funktioniert.

    Danke sangt SoccerReal.de

    SoccerReal

  6. 5. Februar 2017 bex Antworten

    Komisch habe es genauso gemacht, funktioniert nicht. obwohl die elemente exakt wie auf der testseite sind.

    div {
    width: 250px;
    height: 250px;
    text-align: center;
    border: 1px solid #88f;
    }
    span {
    width: 10px;
    height: 100%;
    display: inline-block;
    margin-left: -10px;
    vertical-align: middle;
    }
    img {
    vertical-align: middle;
    border: 0 none;
    max-width: 250px;
    }

    Titel

    • 10. Februar 2017 Eduard Weber Antworten

      Ich schaue es mir gerne kurz an um den Hinweis zu geben woran es liegt. Bitte schreib mir einfach die URL wo ich den Stand sehen kann.

  7. 27. Juni 2017 Udo Kühne Antworten

    Danke, Euere Posts waren für die avisierte Lösung ergiebig … 😀

    Wenn das Bild auf der linken Seite abgeschnitten wird, ist dies aktuell die praktikabelste Lösung …

    Source code snippet: lang=Javascript

    // after rotate action (click listener)
    var imgDimAfterRotate = document.getElementById(„myImg“).getBoundingClientRect();

    if( imgDimAfterRotate.left < 0 ) {
    document.getElementById("myImg").style.margin = "auto";
    // … do anything more …
    } else {
    // Image area is all visible
    document.getElementById("myImg").style.margin = "5px";
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Machart Studios Werbeagentur