# Bild horizontal und vertikal zentrieren



## djsput (13. Januar 2012)

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


----------



## djheke (14. Januar 2012)

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!


----------



## djsput (14. Januar 2012)

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


----------



## CPoly (14. Januar 2012)

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

Beispiel: http://www.getsportphotos.com/viewthumbs.aspx?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.


----------



## djheke (14. Januar 2012)

Dann versuch's mal so.


```
* {
 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;
}
```


----------



## djsput (15. Januar 2012)

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


----------



## CPoly (15. Januar 2012)

djsput hat gesagt.:


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


----------



## djheke (15. Januar 2012)

Na dann vielleicht mit line-eight.

Line-Height

Ansonsten kannst du es ja mit PHP realisieren.


----------



## djsput (15. Januar 2012)

CPoly hat gesagt.:


> 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


----------

