Bild horizontal und vertikal zentrieren

D

djsput

Grünschnabel
Hallo!
Kennt einer von euch eine Möglichkeit wie ich ein Bild horizontal und vertikal zentrieren kann ohne Angabe der Bild Höhe und Breite (das heißt wenn diese bei allen Bildern unterschiedlich ist) ****

beispiel.jpg

Das ganze muss in allen Browser funktionieren.

Ich kenne eine Methode in dem man dem div position:relative vergibt und dem Bild
bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0;

das klappt ganz gut in Firefox und Chrome IE 9+ aber nicht in Opera und wahrscheinlich auch nicht in IE kleiner 9 ! Saffari habe ich nicht getestet....

Kann mir jemand helfen **** :)
 
Hallo,
entweder du nimmst die Fricca-Methode, wenn du alte Browser unterstützen willst oder wenn die Bildgrößen nicht bekannt sind mit den Pseudoelementen :before oder :after in Verbindung mit vertical-algn:middle.

Anleitung Fricca-Methode
Möglichkeit mit :before oder :after

Vielleicht hilft es dir.

Achso, display:inline-block in Verbindung mit vertical-align würde auch völlig ausreichen!
 
Zuletzt bearbeitet:
danke für die Antwort :)
1. also die erste Methode kenne ich, doch kann diese hier nicht benutzen da man ja in diesem Fall dem Bild eine Höhe und Breite vergeben muss damit man mit margin arbeiten kann.
Das wollte ich ja nicht, weil ich die Bilder von php immer in unterschiedlichen Größen bekomme und so nicht weiß was das Bild für eine Höhe und Breite hat.
2. die 2 Methode scheint einigermasse in Opera zu funktionieren, doch nicht perfekt! Das Bild ist nicht 100% mittig. Ich habe da mit margin-left:-4px; margin-top:8px; bishen nachgeholfen doch klappt nicht bei allen Bilder manchmal sind diese trotzdem versetzt. Und wenn die Bilder so verschachtelt sind div > a > img und bei hover auf bild wird noch was nachgeladen, klappt es auch nicht.

Hat noch jemand welche Ideen **** :)
 
Dann versuch's mal so.

Code: 
* {
 margin:0;
 padding:0;
}

div {
float:left;
 margin:10px;
 border:1px solid #a33;
 width:120px;
 height:120px;
 text-align:center;
}

div:after {
 content:"";
 height:100%;
 vertical-align:middle;
 display:inline-block;
}

div img {
 display:inline-block;
 vertical-align:middle;
}
 
@ CPoly - Die Idee ist einfach und gut, danke :) Ich denke nur das IE Probleme machen wird mit background-position: center center;

@ djheke - Es scheint jetzt so zu funktionieren :) Danke !! Soweit ich weiß kennt IE kleiner 8 kein :after, deswegen wird es da nicht funktionieren, eine Idee wie ich es auch da zum laufen bekomme !?

Hat noch jemand Ideen !? Vielleicht eine universelle Lösung für alle Browser ****
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück