Bild positionieren

[Paul]

Moin.

Habe folgendes Konstrukt:
<div style="height:100%; width:50px; background-image:url(mitte.jpg); background-repeat:repeat-y"><img src="sequence.gif" style="position:relative; top:50%;" alt=""></div>
Nun möchte ich, dass das Bild innerhalb des div immer in der horizontalen Mitte liegt (top:50%), egal wie hoch das div wird. Leider kommt die Höhe des Bildes an sich noch drauf. D.h., dass die Bildmitte immer bei 50%+1/2Bildhöhe liegt.
Kann man folgendes umsetzten:
style="position:relative; top:(50%-15px);"
?

Paul

[apsel]

Om nah hoo pez nyeetz, Paul!

Moin.

Habe folgendes Konstrukt: <div style="height:100%; width:50px; background-image:url(mitte.jpg); background-repeat:repeat-y"><img src="sequence.gif" style="position:relative; top:50%;" alt=""></div>

Verwende keine inline-styles, sondern setze die CSS-Angaben in eine Datei, die dann via <link> eingebunden wird.

Nun möchte ich, dass das Bild innerhalb des div immer in der horizontalen Mitte liegt (top:50%), egal wie hoch das div wird. Leider kommt die Höhe des Bildes an sich noch drauf. D.h., dass die Bildmitte immer bei 50%+1/2Bildhöhe liegt. Kann man folgendes umsetzten: style="position:relative; top:(50%-15px);" ?

mit reinem CSS nicht, für den IE gibt es solche Expressions, allerdings beruhen die auch auf Javascript.

suit hat einen Artikel zur Zentrierung mit einem Hilfselement erstellt, der sollte auch dir weiterhelfen.

Matthias

[Der Martin]

Hallo,

Kann man folgendes umsetzten:
style="position:relative; top:(50%-15px);"

nein, so nicht. Eventuell kannst du einen der beiden Beiträge aber mit margin nachbilden:

position: relative;  
top: 50%;  
margin-top: -15px;

So long,
 Martin

[Paul]

Hallo!

position: relative;

top: 50%;
margin-top: -15px;

  
Läuft wunderbar. Danke!