Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Bildhöhe im Div zentrieren?“

kaltmacher

Nikon-Fan

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:
Code:
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:

Code:
#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
 

knispel

Mediendesigner

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:

HTML:
<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:

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

kaltmacher

Nikon-Fan

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
 

Tripstrue

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben