how to center an image vertically

Hi there,

I've implemented a Gallery with the Galleriffic plugin and am looking for a way to center the images vertically. Some fill out my whole slideshow container while others don't, see here for an example: http://rosi-jaeger2.butterundfische.de/index.php?id=8 (the second picture in the slideshow should be centered or have a top padding of about 150 px)

I've tried setting display: table-cell; vertical-align: middle on the surrounding containers without success. Now I've started thinking about using Javascript to figure out what size the picture is and then giving it an extra class … Any better ideas? Maybe even Gallery options?

Thanks, Ri.

js is one way but I've never liked that way.

This works to center an image horizontally and vertically:
the html:

the css:

You'll need to adapt this to your situation obviously!

There are other ways - just google your post title

I presume the images will be variable height? I'm trying to solve a similar problem, i need to get the image dimensions so i'm looking at writing a snippet which uses php getimagesize, no joy yet though. With css you could use something like the following but you would still need to get the image height somehow.

I'm not sure this would work with an image, but it looks interesting, and should work in all browsers:

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.






------------------------------------------------------------------------------------------
PLEASE, PLEASE specify the version of MODX you are using.
MODX info for everyone: http://bobsguides.com/modx.html

Thanks for thinking along!

whistlemaker & BobRay, I'm not getting your ideas to work in my somewhat hacked Galleriffic environment, as I've had to position the image absolutely. Maybe I'll look for a different slideshow setup and then try your ides again.

bobwal, let me know if get your snippet set up, it sounds very interesting, pretty much what I'm looking for.

For the moment I'll probably alter the images manually (= add a white background) so that they're all the same size …

Thanks again,
Ri

Hi rixe, I've got my snippet working, you can take a look here https://forums.modx.com/thread/77566/passing-image-width-to-thumbtpl#dis-post-428802

I'm getting performance issues now but if you are just running it on one image at a time I think you would be okay.

Thanks bobwal, my client decided she likes the pictures at the top so I'm ok for now ;-)

But I'll look into it next time!

Hi guys! I want to align the the thums vertically. I haven't finsished my gallery still. I use this template: http://www.twospy.com/galleriffic/example-3.html#leaf. I changed one from the images that are in the template with my personal, but my height is not the same and the images(thumbs) are aligned TOP vertically. I want they to be aligned Bottom. In galleriffic-3.css - vertically align is not here. It is in jquery-1.3.2.js or jquery-1.3.2.js. But i can't find it. I can't use JS - only templates. Can someone help me? Thank's in advance.

@grizli:
I find your post a little confusing to decipher... but anyway I'll try to help!

The example you give has the image centered using the technique I suggested earlier in this thread - i.e. using a line height ( suitable for the biggest image to be displayed) display: inline (though I did not quickly see where the example did this, the image is displayed inline) and centering using "vertical-align: center;" (in the example you gave it was line 61 of gallerific-3.css)

If you want the image aligned to the bottom you would just use: "vertical-align: bottom;"

Note: I think you'll find that the line height (specified in your example on line 51 of gallerific-3.css) has to be large enough for the tallest image that will be displayed.

In galleriffic-3.css - vertically align is not here.

my browser thinks it is - line 61 (as I mentioned above)

edit: I just looked a little closer at the Galleriffic site and note that that it says use with jQuery 1.3.

jQuery is up to 1.7.something - seems like there is not much activity keeping gallerific up to date (I could be wrong) so just a heads up - there have been some significant changes in jQuery from 1.3 to 1.7 - some are not backwards compatible [ed. note: whistlemaker last edited this post 14 years, 3 months ago.]

Quote from: whistlemaker at Jul 08, 2012, 01:03 PM

@grizli:

and centering using "vertical-align: center;" (in the example you gave it was line 61 of gallerific-3.css)

If you want the image aligned to the bottom you would just use: "vertical-align: bottom;"

You speak about the medium images. I mean the thumbs - the smallest pictures, where you click to choose image and see them bigger (actually in medium size) in page 1,2...