Bild/Block Horizontal und Vertikal zentrieren

[Cano2]

Hallo,

ich möchte ganz einfach mit CSS (wie bisher mit Tabellen schön einfach) auf einer leeren Seite ein Bild oder einen Block mit fester Breite vertikal und horizontal zentriert ausrichten, und zwar so dass falls das Browserfenster zu klein wird auch Scrollbalken erscheinen.

Ich habe bisher schon alles mögliche versucht und nach quellen gesucht, aber bisher einfach nicht das gewünschte resultat ereichen können. Dabei kann das doch nicht so schwer sein, oder?

Vielen Dank für eure Hilfe...

Martin

[Cheatah]

Hi,

Dabei kann das doch nicht so schwer sein, oder?

leider doch - das W3C hat vertikale Ausrichtung nur für Inline-Elemente (das gilt dann zueinander) und Table-Cell-Elemente vorgesehen. Du kannst natürlich das umgebende Element zu einer Table-Cell machen, bekommst dann aber Probleme mit verschiedenen Browsern (z.B. dem IE).

Du kannst versuchen, das Bild erst 50% des umgebenden Elementes nach unten schieben, und anschließend um 50% der Bildhöhe nach oben zu ziehen. Negative Margins regeln. Dieses Vorgehen ist natürlich nur im Einzelfall verwendbar.

Cheatah

[Till]

Mhhhh...

Ich weiß nicht ob es W3C konform ist:
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

mfg Till

[Cheatah]

Hi,

Ich weiß nicht ob es W3C konform ist:

ist es, gilt aber wie gesagt nur für Elemente des Typs Inline oder Table-Cell, nicht für Block. Siehe auch http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align.

Cheatah

[Till]

Aaaaahhh ok : )

Till

[Cano2]

leider doch

*grmbl* habs ja doch befürchtet...

Du kannst versuchen, das Bild erst 50% des umgebenden Elementes nach unten schieben, und anschließend um 50% der Bildhöhe nach oben zu ziehen. Negative Margins regeln. Dieses Vorgehen ist natürlich nur im Einzelfall verwendbar.

hm.. habs mal probiert (=> http://mogchan.de ) und wenn das Browserfenster groß genug ist passt das von der optik her... aber mit dem scrollen verhälts sichs etwas merkwürdig.. noch irgendne idee?

Cheatah

Immer noch hier? Da komm ich nach Jahren mal wieder hierhin und als erster immernoch Cheatah mit ner antwort..

[Cheatah]

Hi,

hm.. habs mal probiert (=> http://mogchan.de )

neben </faq/#Q-19> ;-) hast Du nicht beachtet, dass sich Prozentwerte bei der top-Eigenschaft nach der Höhe des Containing Blocks richten, welcher mangels anderslautender Angabe nur so hoch ist, wie er unbedingt sein muss.

und wenn das Browserfenster groß genug ist passt das von der optik her... aber mit dem scrollen verhälts sichs etwas merkwürdig..

Ich kann leider kein Problem erkennen, weil bei mir das Element ganz oben (bzw. noch höher) ist.

Cheatah
Immer noch hier?

Ja, das ändert sich nicht so leicht ... die Operation ist mir einfach zu teuer ;-)

Cheatah