Lightbox Bilder mittig

[esszimmer]

Hallo,

ich habe in Lightbox Version 2 Fotos in Quer- als auch in Hochformat. Jetzt hängen bei mir alle oben im selben Abstand vom Rand. D.h. die hochformatigen muss ich dann immer scrollen. Ich möchte aber, dass die Mitte der Querformatbilder (800 x 539 px) in der Mitte des Bildschirms ist. Dasselbe soll auch mit den querformatigen (selbe Größe - nur quer) geschehen. Wass muss ich bei der css-Datei eingeben?
Danke.

 

[Silvio]

AW: Lightbox Bilder mittig

Da ich gerade die Lightbox nicht parat habe, bitte cih Dich, doch mal die css hier zu posten, danke

 

[esszimmer]

AW: Lightbox Bilder mittig

#lightbox{ position: absolute; height: 100%; width: 100%; z-index: 100; text-align: center; line-height: 10;}
#lightbox img{ width: auto; height: auto; left: 50%; top: 50%;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; left: 30; top: 6%; width: 100%; z-index: 91; background-color: #A8BEA6; height: 100%; margin: 0 auto;}
#imageContainer{ position: relative; width: 100%; height: 100%; padding: 20; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: -24; height: 100%; width: 894; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 33%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../../Grafiken/gif/prevlabel1.gif) left 33% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../Grafiken/gif/nextlabel1.gif) right 33% no-repeat; }

#closeButton{ top: 0px; right: -22px; }

#imageDataContainer{
position: relative; top: 46;
left: 74; margin-left: 0px;
font: 10pt Arial, Helvetica, sans-serif;
background-color: #a8bea6;
line-height: 20;
padding-right: 0px;
padding-left: 0px;}

#imageData{ padding: 20px; height: 44px; color: #0d1b0c; }
#imageData #imageDetails{ width: 80%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: none; clear: left; padding-bottom: 0; }
#imageData #bottomNavClose{ position: absolute; left: 726; width: 126px; float: right; top: -38px; padding-bottom: 0px; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #A8BEA6; }

 

[Tim1901091]

AW: Lightbox Bilder mittig

Ohne mir das ganze CSS jetzt durchzulesen:

Zentrierung macht man eigentlich mit zwei Effekten:
text-align:center; (ist hier wohl eher unpassend) oder mit:

margin:0 auto (links und rechts also auf "auto"). Eventuell musst du das dann noch mit position:absolute aus der eigentlichen Seite rausnehmen.

 

[fuiax]

AW: Lightbox Bilder mittig

Es gibt inzwischen einen Haufen Lightbox-*****s, darunter auch einige, die sowohl horizontal als auch vertikal zentrieren. Mach dich hier mal kundig:

Warum sternt das hier aus? Da stand anstelle der Sternchen (ohne Leerzeichen): c l o n e