Hi,
I am working with a Wordpress theme in a child theme style sheet
If you resize the page you will see that when there is a lot of spare space depending on how many images fit in a row they sit to the left with the space on the right. I want the rows of images to be centered no matter how many images there are in a row.
I think the div I want to center horizontally is #main, but I could be wrong
I have tried all sorts of things, width auto, margin 0 auto etc. For now I have removed any of my custom CSS related to that div and its parent so that it is as original as possible.
The page is here http://stephanieh57.staging.wpengine.com/shop/
full path of div
html.parent body.archive div#wrapper.parent div#content.col-full div#main.col-left
Am unclear as to what you want , or if it’s actually possible :/. So lets address the tech issues first:
in order to center a BLOCK element ASIDE from margin: 0 auto; you will need to give that element some sort of width, be it in px, %, em etc. I dont see that anywhere in your code, so that may be PART of the issue.
I am not user if the element you want to center is the one you listed in your OP, but this one may work just as well ( again that’s depending on your overall goals) :
ul.products {
margin: 0 auto !important; [U]width:650px;[/U]
}
Note I added a width so you can see how that works.
You could also center your products this way:
ul.products {text-align:center;}
ul.products li {display:inline-block; text-align:left;}
Thanks,
apologies first if anyone has been trying to look at the page. I had a problem with a theme update for a while. All back to normal now.
I see what you mean about a width.
To clarify what I want…
If I want the rows of images in the ul to be able to flow to any number depending on screen size I can not fix the width.
On my screen I get a nice 4 images per row. But size my browser window down and it flows to rows of 3. Eventually 2 then 1. That is what I want. BUT I want the rows to always be centered.
Is that then not possible to achieve with CSS?
If not could Javascript do it?
IF the width of your image blocks, is always the same , you could try :
ul.products {text-align:center;}
ul.products li {display:inline-block; text-align:left;}
but normally centering doesn’t work that way.
When you center a WRAPPER element , you NEED to restrict it’s size. ( the browser calculates: margins= (100%-width)/2… and how would anyone be able to figure out margin w/o knowing width? )
MEANWHILE the element inside are are merely flowing in line… one after the next, this may give the appearance of columns…but is just slight of hand. The elements are actually lined up one after the other, when the browser cant fit an INTEGER # of elements into a row it leaves the remaining space open. In other words if the width of the container is 3.7 images wide, there will appear to be a gap of .7 of an image. There is really no way around that other than the method I suggested above. But again in order for it mo maintain that grid appearance then your image containers (the LIs) must be the same width
)