Ad blocker detected: Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker on our website.
I have the center in gallery set for both category and categories as per the image.
The problem is, if there aren't enough images to fill the width of the gallery, then they are still left justified. (See www.tarzandesign.co.nz/portfolio).
How do I go about having the galleries fully centered regardless of the number of images? I really want the gallery to be 1200px wide (the site width).
Hi, yes, the images are displayed in float boxes. Float boxes are left or right aligned in html/css, there is no center feature html/css.
So centering means, you can center the div over the float boxes, to really center you need to fullfill the div with images, see demo: https://www.phoca.cz/demo/gallery-centering
The div for two images must have a width about 400px. The widt of the whole site depends on your template.
Thanks for your reply. Not really what I wanted. The client I am using it for has differing numbers of galleries in each category. I DON'T want to set each gallery at 2 images wide (on a 1200px wide site that would look stupid).
Is there no way I can add/change the code by putting a div center around something?
OK sorry - I misunderstood your reply and the reference to the demo.
So how do I set it up so the categories are centered within the gallery regardless of how many there are? That is, I want a gallery 1000px wide, but have different categories with different numbers in them - some 1, some 5, some 9. I want those icons to be centered in the gallery.
Hi, first you should know how float boxes and centering is working in html/css
Floatboxes (used in Phoca Gallery) are filling the whole site. So you need to set fixed width for your template and then set the width of phoca gallery box ( count of images you want x (image width + padding and margin) < phoca gallery width)
It is explained in this forum.
See example how the boxes are centered with css/html: