Bilder vertikal ausrichten klappt nicht

unofactura · 14.02.2014

Hallo zusammen,
schon wieder dieses Thema. Ja, leider. Nachdem ich nun gefühlte 100 Webseiten und Tutorials abgeklappert habe bin ich der Lösung kein Stück näher gekommen. Es will mir nicht gelingen Bilder vertikal in einem div auszurichten. Ich möchte eine Art Bildergalerie machen. Dabei sollen die Bilder immer zentriert in einem Rahmen dargestellt werden. Es soll etwa so aussehen.
Bei quadratischen und hochformatigen Bildern funktioniert das astrein, nur wie am im Beispiel zu sehen ist kleben die Querformate alle oben im Rahmen. Mit festen Werten will ich nicht arbeiten, da das Seitenverhältnis immer unterschiedlich ist.
Na ja, möglicherweise ist auch mein Ansatz total falsch. Auf jeden Fall sind alle Tipps willkommen.

Hier noch der Code incl. CSS zur obigen Beispielseite:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Test f&uuml;r Bilder</title>
    <meta charset="utf-8"/>

<style type="text/css">
body {
    background-color: #c7c7cc; /*Hintergrundfarbe um den Mittelteil herum*/
    font-family:Arial,sans-serif;
    font-size:14px;
}

img {
    display:block;
}

#wrapper{
width:980px; /*Etwas breiter als Header, damit wirkt Header leicht plastisch*/
height:450px; /*Fester Wert, gleich bei allen Seiten ohne Bilder*/
margin:0 auto; /*Zentriert das div!!!!*/
text-align:left; /*Nicht unbedingt erforderlich*/
border:1px solid #6e6e6e; /*Rahmen zur div-Identifizierung*/
border-radius:3px;
background-color: white
}

#seite{
    float:left;
    text-align:justify;
    margin:20px;
    padding:5px;
    width: 200px;
    height:300px;
    border:1px solid red /*um das div zu erkennen*/
}

#galerie{
    width: 600px;
    height:400px;
    margin:20px 20px 250px auto;
    border:1px solid black; /*zur Identifikation des divs*/
}

.bildbox{
    width:150px; /*feste Breite*/
    height:150px; /*feste Höhe*/
    float:left;    /*damit die divs nebeneinander stehen*/
    background-color:#f0f0f0;
    margin:10px;
    padding:10px;
    border:1px solid blue; /*nur zur Indentifikation des divs*/
}

.quadrat{
    width:130px;
    height:130px;
    margin: 10px;
}

.hoch{
    height:130px;
    margin:10px auto;
}

.quer{
    width:130px;
    margin:0 auto;
}
</style>
</head>


<body>
<div id="wrapper">
<aside id="seite">
    <p>Hierhin kommt noch weiterer Inhalt und eine Navigation.</p>
</aside>

<div id="galerie">
    <div class="bildbox">
        <img class="quadrat" src="1234.jpg" alt="Bildtext" title="Bildtitel">
    </div>
    <div class="bildbox">
        <img class="hoch" src="2345.jpg" alt="Bildtext" title="Bildtitel">
    </div>
    <div class="bildbox">
        <img class="quer" src="3456.jpg" alt="Bildtext" title="Bildtitel">
    </div>
    <div class="bildbox">
        <img class="quer" src="3456.jpg" alt="Bildtext" title="Bildtitel">
    </div>
    <div class="bildbox">
        <img class="quadrat" src="1234.jpg" alt="Bildtext" title="Bildtitel">
    </div>
    <div class="bildbox">
        <img class="hoch" src="2345.jpg" alt="Bildtext" title="Bildtitel">
    </div>
</div> <!--Ende Galerie-->
</div> <!--Ende wrapper-->
</body>
</html>

terrenal · 14.02.2014

"eigentlich" geht das mit display:table-cell

das kollidiert hier aber mit dem float des div

deshalb kann man entweder alle Bilder als Hintergrundbilder einbauen die zentriert sind (Nachteil: wird in manchen Umgebungen und Druck nicht immer gezeigt)

oder man fügt in die Bildbox ein weiteres div (hier mit class="innen") ein
das wird dann so formatiert

Code:

.innen {
    display: table-cell;
    height: 150px;
    vertical-align: middle;
    width: 150px;
}

unofactura · 14.02.2014

Geil, funktioniert super.
Vielen Dank für die schnelle Hilfe!

emet · 22.03.2014

terrenal hat die absolut beste Antwort gegeben.

Dazu eine kleine Info:

Alle IDs oder Klassen lassen sich wie Tabellen behandeln und alle sprechen auf die Anweisungen table oder table-cell an.

Somit macht man sich Eigenschaften von Tabellen nutzbar ohne Tabellen zu benutzen.

Also beim suchen von Lösungen einfach manchmal quer denken. Das gilt auch für andere Probleme.