Help - Search - Members - Calendar
Full Version: How to Center items in a Grid
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
chome4
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=XZF...MlWPDlf6mqiwLoy
pandy
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 }

chome4
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!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.