Zwei Grafiken im DIV vertikal zentrieren

[rellek]

Guten Morgen,

ich möchte gerne zwei Grafiken in einem DIV-Container zentrieren, und zwar vertikel (in Y-Richtung, wie auch immer).
Leider bin ich vermutlich zu doof dafür - auf jeden Fall klappts mit "margin: 0 auto" nicht.

Die erste Grafik ist 100x72px breit (die müsste wegen mir gar nicht zentriert werden, weil die DIV-Box hinterher eh nur 72px hoch wird) und die andere hat 200x40px. Letztere sollte nicht, wie es bisher ist, an der Unterkante der ersten Grafik kleben, sondern eben in der Mitte sein.

Mein Quellcode sieht so aus:

#headimg {
		position:fixed;
		background-color: #fff;
		left:0px;
		top:0px;
		width: 100%;
		height: 72px;
}

	<div id="headimg">[img]gfx1.gif[/img] [img]gfx2.gif[/img]</div>

Mag mir da jemand auf die Sprünge helfen?
Vielen Dank

 

[Gokux]

Eine Möglichkeit wär:

#headimg {
	position:fixed;
	background-color: #fff;
	left:0px;
	top:0px;
	width: 100%;
	height: 72px;
}
#bildzwei {
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -20px;
}

<div id="headimg">[img]gfx1.gif[/img] [img]gfx2.gif[/img]</div>

Du könntest natürlich eines von den beiden Bildern auch als CSS Background einfügen, falls du willst.

#headimg {
	position:fixed;
	background: #fff url(gfx1.gif) no-repeat;
	left:0px;
	top:0px;
	width: 100%;
	height: 72px;
}
#headimg img {
	margin-top: 16px;
}

<div id="headimg">[img]gfx2.gif[/img]</div>

 

[rellek]

Danke erstmal, das werde ich probieren und berichten.

Aber mal so nebenbei (auch wenn ichs totaaaal ungern sag) - bei Tabellen gabs so ein schickes v-align - bei CSS nicht? Was soll das denn

 

[rellek]

Okay, hat an sich funktioniert. Aber der Spieltrieb ließ nicht locker und hat folgende formschöne (wenn auch total umständliche) (EDIT: Die alte, unschöne Lösung gibts unten) Lösung ans Licht der Welt befördert:

#headimg {
		position:fixed;
		background-color: #fff;
		left:0px;
		top:0px;
		width: 100%;
		height: 72px;
}

#headimg img {
	vertical-align: middle;
}

<div id="headimg">[img]gfx1.gif[/img] [img]gfx2.gif[/img]</div>

---
Hier die alte, wenigr schöne Varante:

#headimg {

		position:fixed;
		background-color: #fff;
		left:0px;
		top:0px;
		width: 100%;
		height: 72px;
}

.middleimg {
	vertical-align: middle;
}

	<div id="headimg">[img]gfx1.gif[/img] [img]gfx2.gif[/img]</div>

 

[Gokux]

Ja, v-aling gibts auch in CSS, aber ich glaube das funktioniert nicht unbedingt in den älteren Browsern zu 100%. Desweiteren dachte ich das du die Graphiken übereinander willst ^^.
In CSS gibts für jedes Problem 10 Lösungen *g*.

 

[rellek]

Oh, jetzt habe ich sogar noch eine extrem-schicke Lösung (ohne class im img) gefunden. Die Lösung ist... nicht trivial, aber der html-code ist zumindest hübsch.

Ja, ich wollt die schon nebeneinander haben *g* Ich dacht, das war klar, weils standardmäßig so angezeigt wird und ich mich nicht drüber beschwerte. Macht aber nichts


Eh, wie alt darf ein Browser denn sein? Kanns der IE7 schon? Ggf. IE6? IE6 steht afaik schon nicht mehr zur Debatte auf der Zielplattform, aber wenn ers kann, ists nicht verkehrt...

 

[Gokux]

Die beiden IEs sollten es in demfall sogar können .

 

[rellek]

Die gute Nachricht:
Der IE6 kann das mit dem vertical-align.

Die schlechte:
Dafür kann er
position: fixed
nicht

Es ist zum Auswachsen

Edit:
Na gut, so gehts halbwegs:

* html #headimg {
	position: absolute;
}

Zum Glück verstehen andere Browser (inkl. neuerer IE-Versionen!) diesen Quatsch nicht.

Dann klebt meine Box zwar nicht fest am Bildschirm, aber wenigstens ist sie dann korrekt positioniert. Wer Luxus will, muss dann halt nen neueren Browser verwenden 8)

 

[Gokux]

Das hab ich dir mal vor langer Zeit in der Wcom gesagt, dass das nicht geht . Es gibt aber Workarounds für position: fixed im IE6.

Vertical-align funktioniert aber glaub auch nur wenn das Elternelement absolut positioniert ist, oder du mit display: table-.. arbeitest (was aber der IE aber erst ab Version 8 kann ).

Tüfteln ist der beste Weg zum CSS lernen, man entdeckt täglich neue Möglichkeiten .