How to Center items in a Grid |
How to Center items in a Grid |
chome4 |
Aug 21 2019, 01:44 AM
Post
#1
|
Newbie Group: Members Posts: 19 Joined: 6-April 16 Member No.: 24,129 |
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 |
Aug 21 2019, 02:50 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
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 |
Aug 21 2019, 09:50 AM
Post
#3
|
Newbie Group: Members Posts: 19 Joined: 6-April 16 Member No.: 24,129 |
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! |
Lo-Fi Version | Time is now: 13th May 2024 - 02:39 AM |