nicht angemeldet
Bild horizontal zentriert und nach unten ausgerichtet unmöglich?
Gunnar BittersmannHallo,
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
-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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
-
@@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.htmlDein Beispiel basiert auf 'display: table-cell'; ist also auch nicht besser.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
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
--
-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
@@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'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)