img in div vertical zentrieren
0 0 
Detlef G.
img in div vertical zentrieren
Hallo.
Ein Problem mit HTML treibt mich in die Verzweiflung. Ich habe mehrere Bilder mit 150px Breite aber variabler Höhe. Allerdings ist deren Höhe ebenfalls maximal 150px. Jetzt möchte ich bei den zu niedrigen Bildern oben und unten einen farbigen Balken einfügen, damit sie ebenfalls als 150x150 dargestellt werden (natürlich ohne sie zu strecken). Also nehme ich mir eine div-Box der Größe 150x150, färbe sie ein und zentriere das Bild in der Box vertikal. Ist allerdings leichter gedacht als getan, da vertical-align außerhalb einer Tabelle nicht das tut, was ich mir darunter vorstelle - nämlich das Bild vertikal zu zentrieren.
Hier ein (nicht funktionierender) Codeschnippsel, der das verdeutlichen soll, was ich mir vorstelle
div {
width:150px;
height:150px;
background:#000;
vertical-align:middle;
}
div img {
width:150px;
height:auto;
}
<div><img src="foo.bar"></div>
-
Hier ein (nicht funktionierender) Codeschnippsel, der das verdeutlichen soll, was ich mir vorstelle
div {
width:150px;
height:150px;
background:#000;
vertical-align:middle;
}
div img {
width:150px;
height:auto;
}> ~~~html > <div><img src="foo.bar"></div> >Ich hab das mal wie folgt gelöst:
<div> <img> </div>jetzt wird einfach eine line-height definiert, die exakt der gewünschten height des divs entspricht.
Damit hat vertical-align einen Indicator.Nur die zwei muss man in der Breite mit kalkulieren.
mfg Beat
-
Ich hab das mal wie folgt gelöst:
<div> <img> </div>jetzt wird einfach eine line-height definiert, die exakt der gewünschten height des divs entspricht.
Damit hat vertical-align einen Indicator.Nur die zwei muss man in der Breite mit kalkulieren.
mfg Beat
line-height hatte ich auch schon versucht - dabei entstehen ja aber rechts und links vom Bild auch noch unschöne Streifen. Eine Kombination mit negativen margin-Werten ist mir aber etwas zu riskant, da ein Leerzeichen abhängig von der Schriftart eine variable Breite haben kann...
-
line-height hatte ich auch schon versucht - dabei entstehen ja aber rechts und links vom Bild auch noch unschöne Streifen. Eine Kombination mit negativen margin-Werten ist mir aber etwas zu riskant, da ein Leerzeichen abhängig von der Schriftart eine variable Breite haben kann...
line-height funktioniert auch ohne Leerzeichen, wenn du statt des DIVs einen Paragraphen <P> benutzt. Allerdings klappt das nur im IE...
Der mE beste Weg, Bilder (die man nicht skalieren muss) zu zentrieren, ist sie nicht als Image einzubinden, sondern als Hintergrundbild.
Wenn du jedem DIV einfach das entsprechende Bild mit background-position:center; zuweist, sollte es in deinem Szenario wunderbar funktionieren.-
line-height hatte ich auch schon versucht - dabei entstehen ja aber rechts und links vom Bild auch noch unschöne Streifen. Eine Kombination mit negativen margin-Werten ist mir aber etwas zu riskant, da ein Leerzeichen abhängig von der Schriftart eine variable Breite haben kann...
line-height funktioniert auch ohne Leerzeichen, wenn du statt des DIVs einen Paragraphen <P> benutzt. Allerdings klappt das nur im IE...
Der mE beste Weg, Bilder (die man nicht skalieren muss) zu zentrieren, ist sie nicht als Image einzubinden, sondern als Hintergrundbild.
Wenn du jedem DIV einfach das entsprechende Bild mit background-position:center; zuweist, sollte es in deinem Szenario wunderbar funktionieren.Ja, ich denke, ich werde es (vorerst) mit dem Hintergrundbild lösen. Wobei ich tatsächlich daran gedacht habe die Bilder in ähnlicher Weise (aber anderem Kontext) skaliert zu verweden. Aber anscheinend gibts dafür keine universelle Patentlösung... oder? Zur Not muss ich dann halt den Balken ins Bild integrieren.
-
Aber anscheinend gibts dafür keine universelle Patentlösung... oder?
Zumindest keine, die auf JavaScript oder ähnliches verzichtet ^^
-
Aber anscheinend gibts dafür keine universelle Patentlösung... oder?
Zumindest keine, die auf JavaScript oder ähnliches verzichtet ^^
Vielen Dank für die Information. Zu wissen, dass etwas _nicht_ funktioniert ist auch manchmal viel wert. Da ich mir zum Ziel gesetzt habe, dass mein Webprojekt auch ohne JS funktioniert werde ich wohl einfach die Balken ins Bild basteln.
Christian.
-
-
-
-
-
-
Hallo Christian
… und zentriere das Bild in der Box vertikal. Ist allerdings leichter gedacht als getan, da vertical-align außerhalb einer Tabelle nicht das tut, was ich mir darunter vorstelle - nämlich das Bild vertikal zu zentrieren.
Schau dir mal Vertical Centering in CSS und CSS Vertical Centering an.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!