Zur Navigation

Bild im div zentrieren

1 Micha (Gast)

Hallo,

ich möchte innerhalb von quadratischen div-Bereichen jeweils ein Bild zentriert anzeigen.
Entwurf ist hier:
www.bmserver.de/user/kuehn/temp/zentrierentest/bildzentierenimdiv.htm

Leider klappt das nicht. Beim ersten Bild soll oben und unten ein grüner Streifen übrig bleiben, beim zweiten Bild links und rechts und beim dritten Bild soll dieses zentriert im grünen div drin stehen.
Bisher mache ich das mit
#vorschau .bild{
       width:120px;
       height:120px;
       background-color:green;
    }

    #vorschau .bild img{
       position:relative;
       top:60px;
       left:60px;
       margin-top:-50%;
       margin-left:-50%;
    }

Dummerweise scheinen sich die -50% aber auf die Größe des Containers und nicht auf die Bildgröße zu beziehen. Wie kann ich denn nun ein Bild zentrieren, dessen Ausmaße im HTML und nicht im css stehen?
Ich möchte nicht:
- das (grüne) div durch eine einzellige Tabelle ersetzen
- unterschiedliche Klassen für Hochkant- und Querfotos haben, denn wie das dritte Bild zeigt, können auch kleinere Bilder dabei sein (größere nicht).

Danke für Tipps schon mal im Voraus!

Micha

24.05.2005 13:57

2 Jörg Kruse

Hallo Micha,

ja, die 50% beziehen sich auf das Elternelement und sind somit identisch mit den 60px; einen einfachen Weg, um das Problem vollständig zu lösen, fällt mir auf Anhieb leider auch nicht ein. Du könntest die konkreten margin-left und margin-top Angaben direkt im jeweiligen img-Tag vornehmen:

<td><div class="bild"><a href="#"><img src="102-0260_img.jpg" width="120" height="90" style="margin-left:-60px; margin-top:-45px" border="0" alt="102-0260_img.jpg" title="102-0260_img.jpg  600x450  28 KB"></a></div><br><div class="gr">102-0260_img<br><span class="kl">Querformat</span></div></td>

bei einer größeren Anzahl von Bildern wäre das allerdings ein gutes Stück Mehrarbeit

einfach wäre dagegen eine horizontale Zentrierung mit text-align:center in #vorschau .bild - allerdings funktioniert die vertikale Zentrierung mit vertical-align:middle hier nicht

24.05.2005 17:30

3 Jörg Kruse

Nachtrag:

eine alternative Vorgehensweise wäre die Einbindung der Bilder als Hintergrundbild und Zentrierung über "background:center center no-repeat":

<td><a href="#"><div class="bild" style="background:url(102-0260_img.jpg) center center no-repeat transparent; background-color:green;"></div></a><br><div class="gr">102-0260_img<br><span class="kl">Querformat</span></div></td>
    <td><a href="#"><div class="bild" style="background:url(102-0270_img.jpg) center center no-repeat transparent; background-color:green;"></div></a><br><div class="gr">102-0270_img<br><span class="kl">Hochformat</span></div></td>
    <td><a href="#"><div class="bild" style="background:url(102-0261_img.jpg) center center no-repeat transparent; background-color:green;"></div></a><br><div class="gr">102-0261_img<br><span class="kl">kleines Bild</span></div></td>

und im CSS-Teil lediglich:

#vorschau .bild{
    width:120px;
    height:120px;
}

24.05.2005 19:07 | geändert: 24.05.2005 19:11

4 Micha (Gast)


eine alternative Vorgehensweise wäre die Einbindung der Bilder als Hintergrundbild
Was sehen denn da Leute ohne css? Wohl nichts, oder?

Mir erscheint das Problem so einfach zu sein, komisch, dass das nicht geht. Warum tut's denn vertical-align nicht?

Micha

24.05.2005 19:35

5 Jörg Kruse

Im Gegensatz zu text-align richtet vertical-align mehrere Inline-Elemente nicht nach dem Elternelement, sondern nach dem höchsten Nachbarelement aus. Noch eine Möglichkeit: ein Blind-GIF könnte die Rolle des höchsten Bildes übernehmen:

<td><div class="bild"><a href="#"><img src="102-0261_img.jpg" width="80" height="60" border="0" alt="102-0261_img.jpg" title="102-0261_img.jpg  600x450  88 KB"></a><img src="blind.gif" width="1" height="120" border="0" alt=""></div><br><div class="gr">102-0261_img<br><span class="kl">kleines Bild</span></div></td>

und im CSS-Teil:

#vorschau .bild{
    width:120px;
    height:120px;
    background-color:green;
    text-align:center;
}

#vorschau .bild img{
    vertical-align:middle;
}

24.05.2005 20:24

6 Micha (Gast)

Das sieht ja schon mal ganz gut aus (hab's aber noch nicht getestet). Wenn du noch mehr gute Ideen hast, immer her damit!

Micha

24.05.2005 21:06

7 Jörg Kruse

Wenn mir noch was einfallen sollte, werde ich's hier schreiben - und vielleicht kennt jemand anders auch noch eine Möglichkeit

25.05.2005 10:08

8 Micha (Gast)

Ich hab jetzt noch folgenden Tipp bekommen:
#vorschau .bild{
       width:120px;
       height:120px;
       background-color:green;
       display:table-cell;
       vertical-align:middle;
       text-align:center;
    }

    #vorschau .bild img{
    }
Dies gefällt mir auch ganz gut, hat nur den Nachteil, dass der IE es nicht darstellt. Nun überlege ich, ob mir das egal ist (zumindest sehen die IE-User ja auch was, nur eben nicht zentriert).

Weitere Ideen sind immer noch sehr willkommen!

Micha

25.05.2005 13:11

9 Jörg Kruse

Ja, mit display:table-cell wird eine Tabellenzelle simuliert, an diese kann auch ein vertical-align ausgerichtet werden. IE User sehen die Bilder dann nur horizontal zentriert

25.05.2005 13:25

10 Micha

Jetzt nochmal ne Antwort von mir, damit ich bei weiteren Tipps benachrichtigt werde - bin jetzt nämlich nicht mehr nur Gast hier...

Ich hab jetzt das im CSS stehen:
#vorschau td {
   text-align:center;
   vertical-align:top;
   padding:0px;
   border:1px solid #008000;
}
#vorschau td .bild {
   margin:auto;
   background-color:green;
   height:120px;
   width:120px;
   display:table-cell;
   vertical-align:middle;
}
Dummerweise werden die divs, die ich um die Bilder gebaut habe, aber in der Tabellenzelle nicht horizontal zentriert, weder mit margin:auto, noch mit text-align:center.

Wie geht jetzt das schon wieder?

CSS ist doch komplizierter als man zunächst denkt...

Noch Ideen dazu?
Danke schon Mal,

Micha

26.05.2005 21:21