17. Mai 2013
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.
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.
Unser Best Practise: So können Bilder hervorragend vertikal und horizontal im CSS zentriert werden
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).
Hatte genau das Problem, dass meine Bilder verschiedene Größen hatten, aber mit letzter hier vorgestellter Option habe ich alles zentriert bekommen.
Zentriert weder vertikal noch horizontal in FF, ,Chrome und IE 🙁
Bitte Code posten, dann können wir den Fehler besser finden. Sollte eigentlich klappen.
Zur Veranschaulichung habe ich hier nochmal eine Testseite gebaut. Ich habe die Seite im IE, FF, Chrome und Safari getestet (jeweils die aktuellsten Versionen)
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.
Danke. Funktioniert super.
SoccerReal
@oliver
dein Code funmkioniert sehr gut. Danke!!!
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
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
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.
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";
}
…