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) ****



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!

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 ****

Ich setze das Bild als Hintergrundbild und benutze background-position:center;

Beispiel: http://www.getsportphotos.com/viewth...px?aid=44&pa=1

Ich konnte jetzt auf die schnelle keine Seite finden, auf der verschiedene große Bilder sind. Aber wenn du mit der Maus über ein Bild fährst siehst du den quadratischen Rahmen.

Dann versuch's mal so.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

* {  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 ****

Zitat von djsput

@ CPoly - Die Idee ist einfach und gut, danke Ich denke nur das IE Probleme machen wird mit background-position: center center;

Hast du es getestet? Mir sind keine Probleme bekannt. Auch hier ist alles grün für center http://www.css4you.de/background-position.html

Na dann vielleicht mit line-eight.

Line-Height

Ansonsten kannst du es ja mit PHP realisieren.

Zitat von CPoly

Hast du es getestet? Mir sind keine Probleme bekannt. Auch hier ist alles grün für center http://www.css4you.de/background-position.html

Nein, ich glaube, das ich das irgendwo gelesen habe...
Aber wie es aussieht stimmt meine Vermutung nicht, weil wie du es schon sagst bei css4you alles in grünem Bereich ist