tinella
Erfahrenes Mitglied
hallo leute
ich möchte ein in der breite + höhe unabhängiges bild in einem div vertikal zentriert haben. und krieg das seit tagen nicht hin *argh*
mein aktueller status kann man hier sehen.
Die Bilder (hoch und querformatig) sollen schachbrettartig dargestellt werden, falls eins weniger breit (hochformatig) ist, soll das bild einen abstand kriegen und erst wieder unterm obigen gsetzt werden. Ein querformatiges Bild muss vertikal zentriert werden, gemessen an einem hochformatigen Bild nebenan.
Jetzt ists so, dass das nächste Bild grad anschliessend platziert wird (zwar korrekt zentriert vertikal, aber nicht schachbretartig).
#css vom div das das bild umgibt:
#css vom img:
#HTML:
Das Problem liegt darin, dass ich display auf inline setzen muss, um eine vertikale Zentrierung hinzukriegen. So kann ich aber leider die Div-Breite nicht erzwingen, um einen allgemeingültigen Abstand / Breite aller Bilder hinzukriegen.
Mache ich es mit display:block, und setze für die Gliederung ein float:left hin, geht die vertikale Zentrierung verloren, dafür sind die Bilder schachbrettartig angelegt.
Kennt ihr das Problem? Wie habt ihr das gelöst bzw. wie würdet ihr das lösen?
Danke für allfällige Tipps, ich weiss nicht mehr weiter
Tinella
ich möchte ein in der breite + höhe unabhängiges bild in einem div vertikal zentriert haben. und krieg das seit tagen nicht hin *argh*
mein aktueller status kann man hier sehen.
Die Bilder (hoch und querformatig) sollen schachbrettartig dargestellt werden, falls eins weniger breit (hochformatig) ist, soll das bild einen abstand kriegen und erst wieder unterm obigen gsetzt werden. Ein querformatiges Bild muss vertikal zentriert werden, gemessen an einem hochformatigen Bild nebenan.
Jetzt ists so, dass das nächste Bild grad anschliessend platziert wird (zwar korrekt zentriert vertikal, aber nicht schachbretartig).
#css vom div das das bild umgibt:
Code:
#content .thumbnail{
width:100px;
height:100px;
display:inline;
padding: 15px 15px 0px 0px;
padding: 0px;
text-align:center;
}#css vom img:
Code:
#content .thumbnail img{
vertical-align: middle;
border: 1px solid #778899;
padding: 1px;
}#HTML:
Code:
<div id="gallerie">
<div class="thumbnail">
</div>
<div class="thumbnail">
<a title="" rel="lightbox[group]" href="http://www.bilderundworte.ch//files/_galleries/fotografie/portfolio/projektbattlefinale/battle_finale_001_buw.jpg">
<img border="0" alt="files/_galleries/fotografie/portfolio/projektbattlefinale/battle_finale_001_buw.jpg" src="http://www.bilderundworte.ch/dynimages/100/files/_galleries/fotografie/portfolio/projektbattlefinale/battle_finale_001_buw.jpg"/>
</a>
</div>
<div class="thumbnail">
</div>
<div class="thumbnail"> usw.Das Problem liegt darin, dass ich display auf inline setzen muss, um eine vertikale Zentrierung hinzukriegen. So kann ich aber leider die Div-Breite nicht erzwingen, um einen allgemeingültigen Abstand / Breite aller Bilder hinzukriegen.
Mache ich es mit display:block, und setze für die Gliederung ein float:left hin, geht die vertikale Zentrierung verloren, dafür sind die Bilder schachbrettartig angelegt.
Kennt ihr das Problem? Wie habt ihr das gelöst bzw. wie würdet ihr das lösen?
Danke für allfällige Tipps, ich weiss nicht mehr weiter
Tinella
