The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to Center items in a Grid
chome4
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 21 2019, 02:50 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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 }

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chome4
post Aug 21 2019, 09:50 AM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 6-April 16
Member No.: 24,129



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:44 AM