[CSS] Bilder in Boxen aber mittig

[IchBinIch]

Hi,

ich habe schon mehrere Threads zum Thema "Bildergalerie" hier gelesen. Dabei bin ich darauf gestoßen, dass man seine Thumbnails nicht in Tabellen packen sollte, sondern lieber in divs, da man so eine variable Anzahl Bilder/Zeile möglich machen kann.

<DIV><IMG src="1.jpg" alt="" /></DIV>
<DIV><IMG src="2.jpg" alt="" /></DIV>
<DIV><IMG src="3.jpg" alt="" /></DIV>

folgendes Stylesheet benutze ich:
div
{
border:1px solid black;
width:150px;
height:150px;
}

Allerdings werden die bilder so oben links in der ecke des Divs angezeigt. Ich möchte die aber mittig (also center/middle) haben.

folgende Erweiterungsollte abhilfe schaffen:
vertical-align:middle;
text-align:center;

leider ohne erfolg.

das center wird genommen. das middle nicht..

Wie könnte ich das machen?

[Byteandi]

sowas geht soweit ich weiss nicht, musst du wohl doch auf eine tabelle zugreifen.


Byteandi

[derHund]

musst du wohl doch auf eine tabelle zugreifen.

nö. nicht unbedingt. padding/margin ...

[Abraxax]

Original geschrieben von derHund
nö. nicht unbedingt. padding/margin ...

das ist auch nicht soooo die dollste lösung, zu dem was er will ... aber eigentlich die einzig sinnvollste.

man könnte jetzt noch mit relativen positionen für die images spielen. aber das halte ich für nicht sinnvoll, da die thumbs ja wahrscheinlich eh immer die gleiche größe haben (werden).

[wahsaga]

Re: [CSS] Bilder in Boxen aber mittig

vertical-align kann hier natürlich gar keinen effekt haben, denn
vertical-align [...] Applies to: inline-level and 'table-cell' elements
(man könnte natürlich die divs per display zu table-cell elementen machen, aber das unterstützt der IE defintiv nicht, bei den anderen weiß ich gerade nicht)

haxe:
da die thumbs ja wahrscheinlich eh immer die gleiche größe haben (werden).

sollten sie zumindest, andernfalls sähe es ja sehr unruhig aus, wenn alle verschiedene größen haben.


aber selbst wenn die größen verschieden sind, kommt man durch kurzes nachdenken doch recht schnell auf eine praktikable lösung ...

die bilder nicht über <img> einbinden, sondern als zentrierte, nicht-wiederholende hintergrundbilder für die divs.

[mrhappiness]

Re: Re: [CSS] Bilder in Boxen aber mittig

Original geschrieben von IchBinIch
Dabei bin ich darauf gestoßen, dass man seine Thumbnails nicht in Tabellen packen sollte, sondern lieber in divs, da man so eine variable Anzahl Bilder/Zeile möglich machen kann.

bild bild bild
bild
bild bild
bild
bild bild bild bild bild
bild

so?
das ist nicht dein ernst oder?

ich würde vorschlagen, entweder eine tabelle zu nehmen, oder, was mir noch besser gefallen tun täte, die bilder einfach floaten zu lassen

img
{
  float:left;
  width:150px;
  height:150px;
  margin:10px;
}

so zum beispiel

das hat den vorteil, dass du keinen platz verschenkst

Original geschrieben von wahsaga
die bilder nicht über <img> einbinden, sondern als zentrierte, nicht-wiederholende hintergrundbilder für die divs.

und ich dachte du magst logisches markup... :-)

[wahsaga]

Re: Re: Re: [CSS] Bilder in Boxen aber mittig

Original geschrieben von mrhappiness
und ich dachte du magst logisches markup... :-)

OffTopic:

---

generell achte ich da natürlich schon drauf.
aber wenn auf diese weise ein effekt erreichen lässt, der anders nur schwer oder gar nicht realisierbar wäre ... dann mache ich auch ausnahmen ;-)

---

[Hopka]

Re: Re: Re: [CSS] Bilder in Boxen aber mittig

Original geschrieben von mrhappiness
bild bild bild
bild
bild bild
bild
bild bild bild bild bild
bild

so?
das ist nicht dein ernst oder?

Ich glaube, es geht dabei eher um eine variable Anzahl im Sinne von verschiedenen Fensterbreiten. Denn bei einer Tabelle hat man immer die gleiche Zahl von Bildern in einer Reihe, egal wie breit das Fenster ist - wenn man die Bilder einfach so neben einander macht kommen mehr Bilder in eine Zeile, wenn das Fenster breiter wird.

[TobiaZ]

ich mache gerade was ähnliches für die Bilder aus'er Toskana. Wollte es auch zuerst mit CSS lösen. Nachdem ich aber ne Menge rumprobiert habe und hier im Forum keine Lösung finden konnte, werde ich es wohl mit Tabellen machen.

Tabellen sind schließlich dazu da Inhalt übersichtlich darzustellen. Nichts anderes willst du ja. Und da kommen mir alle anderen lösungen schlechter vor. Vorallem, weil du ja bedenken musst, dass du Hoch- und Querformat hast. Evtl. kommen noch APS-Formate dazu, ...