Bild mit CSS zentrieren

mec

mec

Aktives Mitglied
Thread Starter
Dabei seit
17.12.2003
Beiträge
377
Reaktionspunkte
1
Hallo!
Ich möchte mit CSS ein Bild im Fenster zentrieren. Hab das Bild in nen <div>-Container gesteckt und schon ne Menge ausprobiert, leider ohne Erfolg. Auch die Hinweise unter https://www.macuser.de/forum/showthread.php?s=&threadid=6417&highlight=css+zentrieren haben mir nicht weitergeholfen. Auf der Seite ist neben besagtem Bild noch ein Hintergrundbild ... falls es wichtig sein sollte.
Kann mir jemand weiterhelfen?

Gruß,
mec
 
Hattest du bisher gar keinen Erfolg oder klappts nur in bestimmten Browsern nicht?
Mit margin: auto; und text-align: center solte es eigentlich funktionieren.

Gruss, cyberrob
 
und ganz normale center tags funzen auch nicht? musst es ja nicht unbedingt mit css ausrichten... mit css ausrichten lohnt an sich nur, wenn du ein Bild oder ein Element unabhängig von der Auflösung immer an der gleichen Stelle haben wills..

aber bei einem allgemeinen zentrieren sollte doch center reichen, oder?
 
Also mit center klappt es, dass ich das Bild horizontal zentrieren kann.
AAAAAAber:
ich möchte das Bild auch mit einem Abstand vom oberen Rand im Fenster stehen haben. Wenn ich dafür dann beispielsweise mit
position:absolute;top: 10%;
versuche, setzen Netscape und Safari das Bild auch schön mit diesem Abstand von oben ins Fenster, aber nun leider nicht mehr horizontal zentriert. Im Internet Explorer funzt es erstaunlicherweise.
Lasse ich die Angabe
position: absolute;
weg, ist in allen genannten Browsern das Bild horiz. zentriert, aber leider pappt es am oberen Fensterrand.
Das Bild kann ich nat. auch mit
position:absolute;
left:18%;
top:16%;
ausrichten, - klappt auch schön- , ist aber leider nicht zentriert.
Naja, wenn´s net anders geht...
Gruß,
mec
 
das klingt ja nach einem echten Problem.... da gibts nur eins:

Das Bild in eine Tabelle, diese positionieren.... oder, was auch geht, Bild in einem iframe anzeigen, den kannst du zentrieren und auch Pixelgenau sagen, wie weit er vom Rand wegsein soll... sowohl von oben als auch von links.

sieht dann so aus:

<iframe src="leer.htm" width=XXX height=XXX align=center hspace=16% scrolling=no>
Dieser Text wird angezeigt, wenn der Browser keine Frames kennt.
</iframe>

und dann das Bild in der leer.htm aufrufen
 
Zurück
Oben Unten