inhalt im div mittig positionieren [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
inhalt im div mittig positionieren

joextra

07-06-2010, 17:06

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

07-06-2010, 17:11

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

07-06-2010, 17:49

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

07-06-2010, 17:53

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

07-06-2010, 18:07

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

07-06-2010, 18:08

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

07-06-2010, 18:10

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

AmicaNoctis

07-06-2010, 18:16

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

07-06-2010, 19:48

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

AmicaNoctis

07-06-2010, 20:07

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 (http://d-graff.de/selfhtml/center1.html).

joextra

07-06-2010, 20:13

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

07-06-2010, 20:18

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.

- -