Bild vertikal zentrieren

[gandalffo]

Hallo,

Ich möchte gerne ein Bild (genauer gesagt ein Thumbnail in meiner Galerie) vertikal und horizontal zentrieren. Horizontal funktioniert, vertikal nicht. Ich habe alle möglichen Sachen ausprobiert die ich in Foren gefunden habe.

Hier mein Code
CSS:

Code: Alles auswählen

.thumb{
  height:200px;
  width: 200px;
  float:left;
  background-color: #FF00FF;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:10px;
  margin-right:10px;
  text-align: center;
  vertical-align:middle;
}
.thumb img{
  vertical-align: middle;
  margin-top: auto;
  margin-bottom: auto;
}


Und hier die Einbindung in HTML:

Code: Alles auswählen

<div class="thumb"><img  src="test.jpg"/></div>


Kann mir jemand weiterhelfen?

[sejuma]

http://www.ohne-css.gehts-gar.net/0002.php

[gandalffo]

Danke für den Link.
Diese Zentrierungsmethode kenne ich schon.
Das Problem ist nur das die Bilder unterschiedliche Maße haben
und diese Methode auf eine bekannte Größe bezogen ist.

[djheke]

Wenn du den IE kleiner 8 nicht beachtest, dann vielleicht so.

Code: Alles auswählen

* {
margin:0;
padding:0;
}

html, body  {
height: 100%;
}

body {
text-align:center;
min-width:634px;
}

body:after {
content:"";
display:inline-block;
height:50%;
background:#a33;
}

#box {
padding:10px;
background:#aaa;
display:inline-block;
vertical-align:middle;
margin-right:-8px;
-moz-box-shadow:0 0 16px #333;
}

#box img {
margin:10px;
padding:10px;
border:2px solid #000;
border-top-color:#fff;
border-left-color:#fff;

}


Du kannst die #box auch weglassen und die Regeln nur auf deinen Bildern anwenden.

vertikal zentrieren mit :after

[djheke]

Zur Sicherheit noch ein Beispiel nur mit Bilder.
Nur Bilder