I have a slideshow on my homepage displaying images from a dynamic album. Its all working well except that the images are all different sizes, and I'd like them to be centred within the slideshow div.

The jquery slideshow plugin uses absolute positioning to position the images to the top left of the div, and I haven't been able to change that with just HTML/CSS.

I've searched for a way to modify the jquery slideshow plugin, but all the solutions I've found don't seem to work - they all break the slideshow in some way. I don't know whether this has something to do with the way the plugin is implemented in zenphoto, or not.

I was hoping another zenphoto user has already found a way to centre the images displayed via this plugin, and might be able to share it with me. Pretty please?!!

Thanks for any help you can provide.

Actually the image/slide is horizontally centered on the default slideshow page a theme has. Vertical centering is not really possible with HTML/CSS unless you use tables. The slideshows JS requires a certain setup to work.

Btw, do you mean it this way?: http://www.okhuizen.nl/

Hi acrylian - yes, I'm trying to achieve something very similar to the slideshow on that site! But for me, while the slideshow is centred on the page, the images within the slideshow div aren't. They're aligned to the left. Its most noticeable with the portrait images.

This is the site I'm working on: http://andrewbellphotography.com/zenphoto/
(there are some portrait images starting with the 3rd and 4th photos in the slideshow which will show you what I mean)

I'm using a highly modified version of the effervescence theme.

While centering vertically would be nice, I know how hard that is to do with CSS, so I'll settle for being able to centre them horizontally!

If they're meant to be centred horizontally by default, then what have I done wrong? Have I messed up something in the theme with all my modifications? It is my first time using zenphoto, so that wouldn't surprise me!

Thank you so much for your help!

Well, the centering is on the normal `slideshow.php` page. Normally centering elements is done via `text-algin: center` and/or `margin: 0 auto`. The actual slide image is within a parent element (div "slideshow" > div "slides" > span "slideimage"). You probably have to set that "slideshow" div to a fixed width (try setting none) and then make the "slides" and "slideimage" ones without any set width and center that. You have to try a little around yourself. You will understand that I can't exactly provide that kind of special support here.

Thanks so much acrylian! It was indeed the width on the slideshow and slides div that was the issue. Its all centered properly now.