Vertikale Ausrichtung von Bild im DIV-Layer

[Scope]

Ich bekomme beim Besten Willen Folgendes nicht hin:

Ich habe einen Layer:

DIV.imp-default-box-content-image {
	float: left;
	height: 128px;
	width: 128px;
	margin: 3px;
	text-align: center;
}

In diesem sollen jetzt Bilder angezeigt werden.
Die längste Seite ist immer 120 Pixel..
Die vertikale Ausrichtung ist aber IMMER oben.. wie bekomme ich die Bilder mittig rein?

Gruß Jörg.

 

[resterampe]

mit vertical-align

 

[Scope]

Soweit war ich auch schon - will aber nicht.

Egal ob vertical-align im DIV oder im Bild steht.. woran kann´s liegen?

 

[Maik]

Probier es doch mal so:

CSS-Code

img 
{ 
position: relative; 
top: 50%; 
margin-top: -60px; /* negative Hälfte von height: 120px = vertikal zentrierte Grafik */
height: 120px;
}

 

[Scope]

Aber was, wenn ich nicht weiß, wie hoch das Bild ist?

 

[Maik]

Dann funktioniert die vorgeschlagene Technik natürlich nicht, da die Höhe bekannt sein muss, um den 'negativen' Aussenabstand nach oben zu bestimmen.

Eine andere Möglichkeit wäre die CSS-Eigenschaft line-height:128px. Leider funktioniert diese vertikale Zentrierung nur bei Text.

 

[resterampe]

man könnte dann doch die höhe des bilder mit GetImageSize auslesen und dann im
<img> tag den style mit margin = -1/2 höhe setzten...

oder aber per javascript

 

[Quasar70]

Vielleicht hilft dir das weiter:

<div style="position: absolute; left: 100px; top: 100px; height: 300px; width: 200px; background-color: #DDDDDD;">
   <div style="position: absolute; bottom: 50%; background-color: #EEEEEE;">
       Text, der unten steht
   </div>
</div>

 

[Quasar70]

Vielleicht hilft dir das weiter:

<div style="position: absolute; left: 100px; top: 100px; height: 300px; width: 200px; background-color: #DDDDDD;">
   <div style="position: absolute; bottom: 50%; background-color: #EEEEEE;">
       Text, der mittig steht
   </div>
</div>