Bild horizontal zentriert und nach unten ausgerichtet unmöglich?

[root66]

Hallo,

wie kann ich ein Bild innerhalb eines divs (feste Breite/Höhe) horizontal zentriert und gleichzeitig am unteren Rand ausrichten? Horizontal zentrieren ist kein Problem, aber um es am unteren Rand auszurichten, kann man nur mit position:absolute (Eltern-Div dann relative) und bottom:0 arbeiten. Nur dann ist es nicht mehr horizontal zentriert. Und die neuen table-cell Angaben kann der IE7 noch nicht.

Mit padding/margin kann ich auch nicht arbeiten, weil die Größe der Bilder variiert und vorher nicht bekannt ist (externe Quelle).

Gibt es eine Lösung?

VG,
root66

[Gunnar Bittersmann]

@@root66:

nuqneH

wie kann ich ein Bild innerhalb eines divs (feste Breite/Höhe) horizontal zentriert und gleichzeitig am unteren Rand ausrichten?

Indem die Zeilenhöhe die gesamte Höhe ausfüllt:

div.pictureframe  
{  
  line-height: 42px; /* derselbe Wert wie für height */  
  text-align: center;  
}  
  
div.pictureframe img  
{  
  vertical-align: bottom;  
}

Qapla'

[Eliara_]

Gunnar Bittersmann:

dein beispiel funkt nicht.

Da ist ein beispiel, wo es machtbar ist, aber natuerlich statt vertical-align:middle schreib bottom:

< http://gut.lv/beispiel/verticalcenter.html>

LG

[Gunnar Bittersmann]

@@Eliara_:

nuqneH

dein beispiel funkt nicht.

Oops. Der Funke springt über, wenn die Zeile wirklich mit Textinhalt gefüllt ist (vorne und hinten, damit das Bild zentriert bleibt):

div.pictureframe:before,  
div.pictureframe:after  
{  
    content: "\A0";  
}

Allerdings fängt der IE < 8 damit kein Feuer, insofern ist die Lösung nicht besser als die mit 'display: table-cell'.

Da ist ein beispiel, wo es machtbar ist, aber natuerlich statt vertical-align:middle schreib bottom:
http://gut.lv/beispiel/verticalcenter.html

Dein Beispiel basiert auf 'display: table-cell'; ist also auch nicht besser.

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Oops. Der Funke springt über, wenn die Zeile wirklich mit Textinhalt gefüllt ist (vorne und hinten, damit das Bild zentriert bleibt):

div.pictureframe:before,

> div.pictureframe:after
> {
>     content: "\A0";
> }

Allerdings fängt der IE < 8 damit kein Feuer,

wenn es denn auch für alte IEs funktionieren soll, müsste doch eigentlich ein   davor und dahinter auch reichen.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

wenn es denn auch für alte IEs funktionieren soll, müsste doch eigentlich ein   davor und dahinter auch reichen.

Hehe, gesucht ist eine Lösung per Stylesheet, keine Verschandelung des Markups!

Qapla'

[Gunnar Bittersmann]

@@root66:

nuqneH

Und die neuen table-cell Angaben […]

Neu?? "table-cell" gibt es, seit es CSS 2 gibt (1998).

[…] kann der IE7 noch nicht.

Mach’s mit "table-cell". Für IE < 8 mit CSS-Expression: wie im dortigen Beispiel, nur nicht durch 2 teilen.

Qapla'