✔ Thumbs ohne Tabelle zentrieren

L

Lizzy

Hallo liebes Forum,

bislang habe ich keine Lösung für mein Problem gefunden. Vielleicht habt ihr ja einen Tipp ...?

Auf den Produkt-Info-Seiten eines von mir betreuten Shops sind die Thumbs (und auch das Haupt-"info-image") mit Hilfe einer Tabelle gleichmäßig angeordnet. Hier seht ihr ein Beispiel:

http://www.kinderfahrradladen.de/ki...-8-jaehrige/puky-crusader-20-3-alu::1631.html

Auf eine Tabelle zurückzugreifen erschien mir bislang deshalb als nötig, weil ich per CSS keine Lösung gefunden habe, die es möglich machte, Bilder unterschiedlicher Höher aber gleicher Breite gleichmäßig und geordnet mit einem beständig gleichgroßen Rahmen darzustellen.

Anders gesagt: Wenn ich drei Bilder habe, z.B. die Größen 80 x 40px, 80 x 60px und 80 x 80px und möchte diese jetzt in einem gleichmäßigem Rahmen von z.B. 100 x 90px nebeneinander und im Rahmen horizontal und vertikal zentriert darstellen, kann ich das dann mit CSS realisieren oder sollte ich die Tabelle beibehalten?

Danke für Eure Empfehlungen und liebe Grüße,
Lizzy
 
Ich nutze dazu background-position:center center
Dann kannst du ein div erstellen, welches deine 100px*90px hat und gibt diesem als Hintergrundbild jeweils ein Thumbnail. Innerhalb des div sind die Bilder dann zentriert und die divs selbst kannst du per float:left gleichmäßg nebeneinander ausrichten.

Edit: Du kannst anstelle des div auch direkt ein a mit display:block nutzen. Funktioniert einwandfrei.
 
Hi,

falls dies nicht mit Hintergrundbildern und background-position:center, sondern, wie in der verlinkten Beispielseite, mit <img>-Grafikelementen umgesetzt werden soll, gibt es neben text-align:center zum horizontalen Zentrieren, vertical-align:middle in Verbindung mit den Tabelleneigenschaften (table, table-cell) der display-Eigenschaft, um ein Element in seinem Anzeigebereich vertikal zu zentrieren.


mfg Maik
 
Hallo,

danke Euch beiden für die Antworten - aber ganz funktioniert es irgendwie noch nicht ...? Was mache ich falsch?
Das sind meine CSS-Anweisungen, aber leider werden die Bilder nur horizontal und nicht vertikal zentriert:

.xyz a {
width:100px;
height:90px;
border:1px solid #CDCDCD;
display:inline;
float:left;
margin:0 5px 5px 0;

und

.xyz img {
width:80px;
display:inline;
vertical-align:middle;

Danke für Eure Hilfe!

Liebe Grüße
Lizzy
 
Ich lehne mich hier mal an meinem verlinkten Lösungsbeispiel an:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical-align elements</title>
<style type="text/css">
.imagewrapper {
        width:320px;
        overflow:hidden;
}
.imageholder {
        position:relative;
        display:table;
        height: 90px;
        width: 100px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #cdcdcd;
        float:left;
        margin:2px;
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
        text-align:center;
}
.inner a img {
        border:none;
}
.inner img{
        display:inline;
        vertical-align:middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%; position:relative;display:block}
</style>
<![endif]-->

</head>
<body>

<div class="imagewrapper">
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="40" alt="Image vertically centred" /></a></div>
     </div>
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="80" alt="Image vertically centred" /></a></div>
     </div>
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="60" alt="Image vertically centred" /></a></div>
     </div>
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="60" alt="Image vertically centred" /></a></div>
     </div>
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="40" alt="Image vertically centred" /></a></div>
     </div>
     <div class="imageholder">
          <div class="inner"><a href="#"><img src="http://www.tutorials.de/forum/customavatars/avatar31374_2.gif" width="80" height="80" alt="Image vertically centred" /></a></div>
     </div>
</div>

</body>
</html>


mfg Maik
 
Hey Maik,

vielen Dank für den Code, das hat mir sehr geholfen!

Zwei kurze Fragen noch:

Womit kann ich denn den Abstand zwischen den 'table-cells' einstellen, margin scheint nicht zu funktionieren ...?
Ist diese Lösung auch browserübergreifend akzeptabel?

Danke nochmals,
Lizzy
 
Den Außenabstand hab ich hier geregelt:
Code: 
.imageholder {
        position:relative;
        display:table;
        height: 90px;
        width: 100px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #cdcdcd;
        float:left;
        margin:2px;
}


Und ja, das Modell ist browserübergreifend kompatibel :)

mfg Maik
 
... mmhh,

damit regel ich doch den Außenabstand der gesamten Tabelle, oder?
Der Abstand der Zellen bleibt davon doch leider unberüht - bei mir zumindest ...?

Grüße,
Lizzy
 
Eine Tabelle existiert in meinem Beispiel überhaupt nicht.

Du willst doch sicherlich einen Abstand zwischen den einzelnen Boxen imageholder einrichten?

Und diesen erziele ich problemlos mit der margin-Regel:

demo_Lizzy.jpg

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück