Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ How to Center items in a Grid

Posted by: chome4 Aug 21 2019, 01:44 AM

Got this image array within a grid I got from a template:

http://test.ericfinlayartist.co.uk/

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....

Files:
https://my.pcloud.com/publink/show?code=XZFPMc7ZQoadtSYJGz8VuMlWPDlf6mqiwLoy

Posted by: pandy Aug 21 2019, 02:50 AM

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.

CODE
#portfolio ul, #portfolio li   { margin: 0; padding 0 }


Posted by: chome4 Aug 21 2019, 09:50 AM

QUOTE(pandy @ Aug 21 2019, 02:50 AM) *

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.

CODE
#portfolio ul, #portfolio li   { margin: 0; padding 0 }



Thanks.

I'll get to work on it!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)