inhalt im div mittig positionieren

[joextra]

hallo,

ich habe eine div box die ein bild und einen kurzen, einzeiligen text enthält. beides soll mittig angezeigt werden. horizontal klappt es aber vertikal nicht.
einen festen wert für die positionierung kann ich nicht nehmen, da die bilder unterschiedlich groß sind. es werden mehrere boxen hinter ein ander angezeigt.

hier der code:

<div class="box">
	<a href="images/bild.jpg" rel="lightbox" title="text"><img src="images/thumbnails/bild.jpg" alt="" /></a><br />
	text
</div>

css:

.box {
	float:left;
	width:128px;
	height:150px;
	text-align:center;
	vertical-align:middle;
}

[AmicaNoctis]

Hallo,

da die bilder unterschiedlich groß sind

Dann geht es mit CSS alleine nicht*. Von Layout-Tabellen rate ich auch ab. Bleibt noch ein onload-Handler für die img-Elemente…

Gruß,

Amica

___
* Mit display: table* zwar schon, aber da spielen nicht alle Browser mit.

[joextra]

mit display: table habe ich es schon versucht, aber hat auch nicht geklaptt.

>> Dann geht es mit CSS alleine nicht
das ist blöd. hätte ich vielleicht gleich auf tabellen setzen sollen. damit müsste es ja klappen.

[AmicaNoctis]

hätte ich vielleicht gleich auf tabellen setzen sollen. damit müsste es ja klappen.

Das schon, aber das ist soooo 90er…

Eigentlich macht man das gar nicht.

[joextra]

Eigentlich macht man das gar nicht.

deswegen habe ich ja auch das div benutzt
allerdings bringt es mir ja nichts wenn es sich nicht so darstellen lässt wie ich es will

[AmicaNoctis]

wenn es sich nicht so darstellen lässt wie ich es will

Der erwähnte onload-Handler kommt für dich nicht in Frage?

[joextra]

genau, was meinst du mit diesen "onload-Handler"? was soll der machen?

[AmicaNoctis]

genau, was meinst du mit diesen "onload-Handler"? was soll der machen?

Anhand der Bildgröße die Position so berechnen, dass es auch vertikal zentriert ist.

[joextra]

ich habe aber nicht nur ein bild sondern auch text. zudem ist das doch auch aufwändig.

[AmicaNoctis]

ich habe aber nicht nur ein bild sondern auch text.

Das könnte man dadurch lösen, dass man Bild und Text in noch einen Container packt, wenn man das will.

zudem ist das doch auch aufwändig.

Nicht wirklich, man müsste nur die height-Property setzen, wenn man es so macht, wie ich es grad im Kopf habe. Mein Ansatz basiert auf diesem Prinzip.

[joextra]

gut, wenn ich das so mache, müsste ich alles noch mal in einen div legen. bei über 50 boxen ist mir das doch zu viel. ich lass es so. trotzdem danke

[AmicaNoctis]

gut, wenn ich das so mache, müsste ich alles noch mal in einen div legen.

Das wäre eine Variante, aber der 50%-Trick würde in abgewandelter Form auch ohne ein zusätzliches div funktionieren. Dann muss der onload-Handler zwei Properties statt einer setzen.