Hi,

also ich versuche Bilder horizontal wie vertikal in einem div zu zentrieren.

Horizontal ist ja alles klar.

vertikal ist da schon ein bisschen schwerer wenn die Bild höhe variieren kann.

Also mit meiner Formel zur Berechnung des Margin-top's kam ich nicht weit:

Mein Ansatz:

list($width,$height)=getimagesize("img");
$marginTop = (100-$height)/2;


Das Div in dem sich ein Bild befindet ist 190px hoch

Warum rechnest du mit 100px wenn die Höhe doch 190px beträgt? Dein Ansätz wäre schon richtig so.

hmm mit 190px passt es auch nicht. Kleinere Bilder verhalten sich in dem zusammenhang anders als größere. :confused:

Dann machst du an anderer Stelle einen Fehler. Poste entweder mal einen Link, wo man das Live sehen kann oder den erzeugten HTML-Code der entsprechenden Stelle.

wenn du die Bilder vertikal mittig haben willst, geh ich davon aus, dass der betreffende div ne statische Größe hat (height: 200px oder sowas...

dann wäre aus deinem Codeschnipsel


list($width,$height)=getimagesize("img");
$marginTop = ($divheight-$height)/2;
natürlich muss dann $divheight mit dem height: x px; des divs übereinstimmen - aber das packst du schon

das Problem an deinem Code-Schnipsel ist doch, dass es schiefläuft, sobald $height > 100 ist ..
entsprechend musst du natürlich absichern, dass der $divheight IMMER größer als die größte Bildhöhe ist ...

Hier wäre der HTML-Teil

<div id="producerContainer">
<div id="producerInfo"><span class="producerHeadline">Header</span> database by <a href="">Link</a></div>
<div id="producerTop">
<div id="producerContent">
<div id="producerLeft">
<div class="producerGlass">
<a class="producerNoCat"></a>Bl&auml;tterkatalog</div><div class="producerGlass">
<a class="producerGlass"><img src="pic" alt="3100898" style="margin-top: 56px" /></a>Artikel
</div>
<div class="producerGlass">
<a href="files/preisliste_absolut.pdf" target="_blank" class="producerPrice"></a>Preisliste
</div>
<div class="producerGlass">
<a href="" target="_blank" class="producerGlass">
<img src="pic" alt="Absolut Lighting" style="margin-top: 3.5px" />
</a>
Website des Herstellers
</div>
<div class="clear"></div>
</div>
<div id="producerRight"></div>
<div class="clear"></div>
</div>
</div>
<div id="producerBottom"></div>
</div>

Hier wäre der Css Teil

#producerContainer {
width: 798px;
margin: 0 auto;
margin-top: 50px;
background-color: #FFCE00;
color: #777777;
}
#producerInfo {
width: 768px;
margin: 0 auto;
padding-left: 30px;
background-color: #FFFFFF;
}
#producerInfo .producerHeadline {
color: #777777;
font-size: 24px;
}
#producerContainer a {
color: #777777;
}
#producerTop {
width: 100%;
background-image: url("../pix/producerBorder.jpg");
background-repeat: repeat-y;
background-position: 2px 0;
background-color: #FFFFFF;
}
#producerContent {
width: 798px;
background-image: url("../pix/producerTop.jpg");
background-repeat: no-repeat;
background-color: transparent;
padding-top: 80px;
}
#producerLeft {
width: 450px;
float: left;
margin-left: 60px;
background-color: transparent;
}
div.producerGlass {
float: left;
width: 189px;
height: 210px;
margin-left: 20px;
background-image: url("../pix/glassBG.png");
background-repeat: no-repeat;
background-color: transparent;
text-align: center;
}
div.producerGlass img {
/*margin-top: 30px;*/
}
a.producerGlass {
display: block;
width: 189px;
height: 190px;
background-image: url("../pix/glass.png");
background-repeat: no-repeat;
background-color: transparent;
}
a.producerPrice {
display: block;
width: 189px;
height: 190px;
background-image: url("../pix/hs_preisliste.png");
background-repeat: no-repeat;
background-color: transparent;
}
a.producerNoPrice {
display: block;
width: 189px;
height: 190px;
background-image: url("../pix/glass.png");
background-repeat: no-repeat;
background-color: transparent;
}
a.producerCat {
display: block;
width: 189px;
height: 190px;
background-image: url("../pix/hs_katalog.png");
background-repeat: no-repeat;
background-color: transparent;
}
a.producerNoCat {
display: block;
width: 189px;
height: 190px;
background-image: url("../pix/glass.png");
background-repeat: no-repeat;
background-color: transparent;
}
#producerRight {
float: left;
width: 230px;
padding-right: 20px;
text-align: justify;
background-color: transparent;
}
#producerBottom {
width: 100%;
height: 88px;
background-image: url("../pix/producerBottom.jpg");
background-repeat: no-repeat;
background-color: transparent;
}

@eagle275

versuch ich gleich mal danke