Mittige vertikale Positionierung von Bildern

[Gunnar Bittersmann]

@@Robert Kuhlemann:

Vertical-align dagegen tut nix. Jedenfalls nicht mit einem Bild.

„Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [CSS2 §10.8.1]

Macht man den Container zu einem 'table-cell'-Element, dann wirkt 'vertical-align'. Jedenfalls in vernünftigen Browsern.

Markup:

<div class="pictureframe">  
  <img src="foo" alt="bar"/>  
</div>

Stylesheet:

div.pictureframe  
{  
  display: table-cell;  
  vertical-align: middle;  
}

Für IEs:

* html div.pictureframe /* IE 6 */  
{  
  font-size: 42px;  
}  
  
*:first-child+html div.pictureframe /* IE 7 */  
{  
  font-size: 42px;  
}  
  
* html div.pictureframe img /* IE 6 */  
{  
  vertical-align: middle;  
}  
  
*:first-child+html div.pictureframe img /* IE 7 */  
{  
  vertical-align: middle;  
}

Kann es sein, dass es kein Pendant zu 'valign=' gibt?

Doch, gibt es: 'vertical-align'.

Live long and prosper,
Gunnar