Bild absolut mittig zentrieren

[tabstop]

Hallo zusammen,

ich bin neu hier und auf euch gestoßen da ich ein Problem habe.
Und zwar möchte ich ein Bild unabhängig von der Bildschirmauflösung und Browser absolut in der Mitte positionieren (vertikal und horizontal).

Wie stell ich das an?

Ich hab schon diverse css Ansätze durch, aber jedesmal schaffe ich es nur es horizontal zu zentrieren.

Ich bitte um Hilfe

Danke vorab

Grüße

tabea

 

[Efchen]

Prinzipiell sollte so etwas immer unabhängig von der Bildschirmauflösung geschehen, denn ein Element an der Auflösung zu zentrieren macht ja schließlich keinen Sinn. Mit einem genügend kleinen Fenster rutscht es dann am Ende zur Seite raus.

Ein Inline-Element zentriert man, indem man dem Elternelement "text-align:center" zuweist. CSS, nicht HTML.

Ach so, vertikal. Ja, das geht nur anständig mit display:table-cell, was aber gewisse, "moderne" *hüstel* Browser nicht können.

Da gibts nur die Alternative, das absolut zu positionieren, mit top:50% und dann einem negativen margin nach oben in der Hälfte der Höhe des zu zentrierenden Elements. Wenn das Browserfenster allerdings kleiner ist, als das Element, verschwindet es oben raus, und da kann man es nicht mehr herholen und Scrollbalken gibts da auch keine.

Gruß,
-Efchen

 

[tabstop]

konkret heist das jetzt dieses hier

<div style="position:absolute;margin:auto;margin-top:-100px;top:50%;width:100%;vertical-align:middle;text-align:center;">
	<img src="test.jpg" alt="" style="height:100px;width:200px;" />
</div>

Funktioniert aber bei meinen Browsern (Opera, IE) nur horizontal, vertikal nicht

 

[Efchen]

Mal abgesehen davon, dass 100 / 2 nicht 100 ist, sondern nur 50 ;-) kann ich das jetzt mangels OP/IE nicht ausprobieren, aber eigentlich müsste es gehen. Google oder such hier im Forum mal danach, das ist doch eigentlich ein alter Hut und müsste leicht zu finden sein.

 

[tabstop]

ok, hattest recht, danke :?

 

[prm]

Es gibt auch noch eine elegantere Methode als mit position: absolute;
Siehe hier unter Ziffer 2: Horizontale und vertikale Zentrierung mit CSS
Vorteil: Es verschwinden keine Inhalte bei zu kleinem Viewport.

 

[neuroleptika]

Gute Beschreibung.

Wenn nur das img zentriert werden soll,
kann man die horizontale Zentrierung auch mit text-align: center; erreichen (inline-Element).

Vertikale Zentrierung mit dem oben genannten Float-Trick.
Horizontal mit text-align:

...
html, body, #seite {
height: 100%;
margin: 0;
padding: 0;
min-width: 30em;
position: relative; /*Bild flackert ohne positionierung beim scrollen (IE6)*/
 }
#floatbasis {
width: 1px;
height: 50%;
min-height: 54px;
}
#inhalt {
position: relative;
margin-top: -54px;
float: left;
width: 100%;
[COLOR=DarkRed][B]text-align: center;[/B][/COLOR]
}

...

<div id="floatbasis">
</div>
<div id="inhalt">
<img src="bild.png" width="106" height="126" />
</div>
...

Bild vertikal und horizontal zentriert, Inhalt darunter absolute positioniert (ab IE5):
Vertikale Zentrierung mit float

Edit:
Habe gerade bemerkt, daß ff2 keinen horizontalen Scrollbalken bei min-width für body anzeigt.
Habe nun ein weiteres <div> um alles gelegt und dem min-width gegeben.