Got this image array within a grid I got from a template:
As you can see, the images aren't aligned centrally either on a full-sized screen or a smaller device.
I've tried to center the images inside the container/s but nothing.
Can someone look at the code and tell me how to centre these two colums of images.
Thanks in advance....
Change the 10px right margin on the LIs to a 10px left margin instead. That will give you evenly sized whitespace all around the images. If you want it differently you need some adjustments.
It's just math. #container is 940px wide. The images are 300px each. 3 images in a row makes 900px. 40px left to distribute. You want 4 margins/spaces, so 40/4=10. You probably had figured that out already. But you need a left and not a right margin because the floats will stack from the left.
I would also remove browser styling of the list when it comes to margin and padding to avoid surprises. Browsers style lists differently, so better control that.
Use for example this. Put it before the margins/paddings you actually want in the style sheet.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)