✔ Bild in div zentrieren

Sprint

Sprint

Erfahrenes Mitglied
Hallo,

ich hänge hier gerade an einer Bildergalerie, bei der jedes Bild einen Rahmen von identischer Größe hat. Die Bilder können nun unterschiedliche Größen und Formate haben und sollen nun innerhalb des Rahmens horizontal und vertikal zentriert werden.
Ich bin bei der Suche zwar schon auf diverse Lösungen gestoßen, allerdings gehen die immer von bekannten Bildgrößen aus. Bei mir werden die Vorschaubilder aber über ein kleines php Script jeweils online erzeugt, so daß ich keine Bildgrößen habe. Ich hab jetzt schon so einiges ausprobiert, allerdings kleben die Bilder immer links oben in der Ecke.
PHP: 
<?php
if ($galerie){
	$start = ($seite - 1) * 9;
	foreach ($_SESSION[liste] as $key => $wert){
		if ($key >= $start && $key <= $start + 8)
			echo '<div class="galerie"><img src="thumb.php?bild='.$wert.'&pfad='.$galerie.'&maxb=170&maxh=113" border="0"></div>';
	}
}
?>
<div class="clear"></div>
Code: 
.galerie { text-align: center; vertical-align: middle; width: 180px; height: 120px; float: left; margin-right: 3px; margin-bottom: 6px; margin-left: 3px; border: solid 1px #666; }
.galerie img { line-height: 120px; text-align: center; position: relative; margin-right: auto; margin-left: auto; }

Irgendwie steh ich hier völlig auf dem Schlauch, oder sollte es wirklich nicht möglich sein, sowas ohne Tabelle zu lösen?
 
Maik hat gesagt.:
Hi,

vertical-align greift bei Blockelementen nur in Verbindung mit der display-Eigenschaft und einem Tabelleneigenschaftswert.

Siehe hierzu das Demo http://www.pmob.co.uk/temp/vertical-align3.htm.

mfg Maik
Zum Vergrößern anklicken....

Soweit war ich fast auch schon mal, hatte da aber was anderes ausprobiert, das nicht funktionierte. Die horizontale Zentrierung geht zwar immer noch nicht, da hat sich jetzt aber herausgestellt, daß das mit einer anderen CSS Anweisung kollidiert.
Danke auf jeden Fall für den Tip.
 
PHP: 
<style type="text/css">
#gala { width: XXXpx; border: 1px solid black; }
</style>

<div id="gala">
<center>

<?php

if ($galerie) {
    $start = ($seite - 1) * 9;
    foreach ($_SESSION[liste] as $key => $wert){
        if ($key >= $start && $key <= $start + 8)
            echo ('<img src="'.$pfad.'/'.$bild.'" width="'.$maxb.'px" border="0px">'); // Performance: externer Skript ist nicht nötig...
    }
}

?>

</center>
</div>
 
Und wo versteckt sich in deinem Codeschnipsel die erwünschte vertikale Zentrierung der Bilder?

Im übrigen gilt das <center>-Element als deprecated, und wird in CSS mittels text-align:center geregelt.

mfg Maik
 
So, nachdem der Störer für die horizontale Zentrierung gefunden ist, stelle ich aber fest, daß die Bilder nicht korrekt vertikal zentriert werden. der obere Abstand ist immer kleiner als der untere. Und gerade bei sehr kleinen Abständen fällt das natürlich besonders auf.
Gibt es da irgendwelche bekannten Probleme?
 
Zeichne das Grafikelement mal mit display:block aus - möglicherweise werden hier "Whitespaces" interpretiert, die einen unerwünschten Abstand unterhalb der Grafik mit sich ziehen.

Wenn dies nicht weiterhilft, kann man sich das Ergebnis mal irgendwo "live" anschauen?

mfg Maik
 
Hi,

die Auflistung der Bilder in der Schleife erfolgt natürlich automatisch untereinander.

Wenn ein Rahmen dargestellt werden soll, kann man ein weiteres Div - Element innerhalb der Schleife einbinden und mit " padding: XXpx; " den gewünschten umlaufenden Platz um das Bild herum verschaffen.

So sollte es funktionieren und ist die einfachste Variante.

Gruss, Andreas
 
ziehdenfinger hat gesagt.:
die Auflistung der Bilder in der Schleife erfolgt natürlich automatisch untereinander.
Zum Vergrößern anklicken....
Vielleicht solltest du dir das nächste Mal zunächst den Beitrag aufmerksam durchlesen und den vorgestellten Code genauer studieren, denn die Bilder sollen überhaupt nicht untereinander, sondern nebeneinander ausgegeben werden.

Das Stichwort ist hier die float:left-Deklaration für die Klasse .galerie.

mfg Maik
 
Maik hat gesagt.:
Zeichne das Grafikelement mal mit display:block aus - möglicherweise werden hier "Whitespaces" interpretiert, die einen unerwünschten Abstand unterhalb der Grafik mit sich ziehen.

Wenn dies nicht weiterhilft, kann man sich das Ergebnis mal irgendwo "live" anschauen?

mfg Maik
Zum Vergrößern anklicken....

Es hätte schon geholfen, hat dabei dann aber die horizontale Zentrierung aufgehoben. Hier ist das als ".galimg img" eingefügt.
Code: 
.galerie { text-align: center; vertical-align: middle; position: relative; width: 180px; height: 120px; float: left; margin-right: 6px; margin-bottom: 6px; border: solid 1px #666; display: table; }
.galimg { vertical-align: middle; position: relative; width: 100%; display: table-cell;}
.galimg img { display: block; }
Das hab ich aber nur lokal bei mir getestet. Der unegale Abstand ist hier zu sehen:
Link
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück