Bildhöhe im Div zentrieren?

[kaltmacher]

Hallo,

ich versuche schon seit gut einer Stunde nach einer Lösung für eine Zentrierung der Höhe von einem Bild im div. Bisher ohne wirklichen Erfolg.

Problematik:
Eine Bildnr wird an eine php-funktion übergeben, diese wiederrum sucht sich das Bild aus der Datenbank (wo die url hinterlegt ist) und gibt das Bild in einen Div aus.

So schaut das aus:

function galerie($bildnr)
{
    connect();
    $sql = "SELECT * FROM bilder WHERE Bildnr=".$bildnr."";
    $qry = mysql_query($sql);
    echo mysql_error();
    $bild = mysql_fetch_array($qry);
    
    echo '<div id="galeriebox">';    
    echo '<img src="http://www.durchdensucher.de/'.$bild['bildurl'].'">';
    echo '</div>';

}

Da die Bilder aber nicht alle das selbe Format besitzen, und auch einige Hochkant sind, kann ich das Bild nicht in der Position fixieren. Mein CSS sieht folgendermaßen aus:

#galeriebox{
width: 330px;
height: 248px;
margin: 0px auto;
text-align: center;
vertical-align: middle;
}

#galeriebox img{
position: relative;
max-height: 245px;
max-width: 330px;
}

Die Bilder werden in der Breite zentriert, aber nicht in der Höhe. Was habe ich übersehen?

Liebe Grüße,
kaltmacher

 

[plastebaer]

AW: Bildhöhe im Div zentrieren?

schau mal hier



SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) ist die erste Adresse in punkto html und css

hoffe es hilft dir weiter

 

[knispel]

AW: Bildhöhe im Div zentrieren?

Die Lösung dieses Problems ist nicht ganz so einfach und wurde schon sehr viel diskutiert.
Habe auf die Schnelle ein Beispiel mit conditional comments:

<style type="text/css">
.galeriebox {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.galeriebox * {
    vertical-align: middle;
}
/*\*//*/
.galeriebox {
    display: block;
}
.galeriebox span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.galeriebox span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

Und html:

<div class="galeriebox"><span></span><img src="..." alt="..."></div>

 

[kaltmacher]

AW: Bildhöhe im Div zentrieren?

Danke, werd ich gleich mal probieren.
Ist eine Klasse dringend notwendig oder kann ich dies auch wie gehabt als ID verwenden?

Lg, km

 

[knispel]

AW: Bildhöhe im Div zentrieren?

Danke, werd ich gleich mal probieren.
Ist eine Klasse dringend notwendig oder kann ich dies auch wie gehabt als ID verwenden?

Lg, km

Geht natürlich auch mit einer ID, aber dann ja nur einmal.

 

[Lobster1956]

AW: Bildhöhe im Div zentrieren?

noch ein Ideenanatz
wenn du kein Image tag benötigst könntest du das Bild auch als Background einbinden (background-position:center center
René

 

[Tripstrue]

AW: Bildhöhe im Div zentrieren?

Hi!

noch eine lösung wenn du eh schon aus einer DB ausliest.

$img = imagesy($bild);
$img = div_höhe - $img;
$marg = $img/2;

style="margin:$marg.px 0px 0px 0xp;

mfg Andi