Bild vertikal zentrieren

[Peter Mairhofer]

Hi,

Ich hab einen div-Container in dem ich ein Bild zentrieren möchte (möglichst horizontal als auch vertikal). Das Problem ist, dass der div floaten muss, weil er wiederum Teil eines parent-div's ist:

<div class="product_image"><br/>
<a href="#"><img src="" alt="Produktbild"></a>
</div>

.product_image
{
        border: 1px black solid;
        border-right: none;
        border-left: none;
        float: left;
        width: 250px;
        height: 280px;
}

Die üblichen Verdächtigen hab ich schon durchprobiert: text-align: center, vertical-align: middle in .product_image als auch Variationen von margin: auto im style des <img>-Objektes.

Da will sich einfach nichts bewegen :-(

Danke & lg.
Peter

[Beat]

Die üblichen Verdächtigen hab ich schon durchprobiert: text-align: center, vertical-align: middle in .product_image als auch Variationen von margin: auto im style des <img>-Objektes.

Da will sich einfach nichts bewegen :-(

Logisch. Das hätte dir aber auch die Dokumentation sagen können.

Angenommen die Bildhöhe sei 100px

.product_image img(position:relative; top:50%; margin-top:-50px;)

Wenn ich nicht schief liege, ist margin-top bei relativen Angaben (%) nicht relativ zur Bildhöhe, sondern zur Breite.

Es zentriert sich schlecht vertical!

mfg Beat

[Peter Mairhofer]

[...]

Angenommen die Bildhöhe sei 100px

Das Problem ist, dass diese nicht bekannt ist :-( Ich weiss nur dass das Bild eben *maximal* 250px breit/hoch ist (gleich wie der div). Falls es aber kleiner ist, soll es darin zentriert werden.

Geht das auch?

lg,
Peter

[Beat]

Angenommen die Bildhöhe sei 100px
Das Problem ist, dass diese nicht bekannt ist :-( Ich weiss nur dass das Bild eben *maximal* 250px breit/hoch ist (gleich wie der div). Falls es aber kleiner ist, soll es darin zentriert werden.

Geht das auch?

Hier kommt ein ganz böser Hack.

  
<div style="width:120px;height:500px;border:1px solid red; line-height:500px; text-align:center;">&nbsp;<img src="" alt="" width="100" height="100" style="vertical-align:middle;">&nbsp;</div>  

Beachte, dass ich line-height die Höhe des äusseren divs gebe (was die maximale Höhe des unbekannten Bildes sei).
Ich brauche ferner etwas, um line-height zu triggern: &nbsp;
Diese muss ich dann in der notwendigen Breite einberechnen.
das <img> erhält vertical-align:middle;

mfg Beat