Center more than 3 images evenly in CSS?

Tobes · 9 Aug 2013 at 13:00

Hi there,

I'm having a problem spacing multiple images in a horizontal line evenly.
www.gameordie.co.uk is the site. The images are at the bottom. I would like to spread them evenly across the width of the site. Google doesn't really seem to be giving my and real answers.

Th3M8dH8tt3r · 9 Aug 2013 at 13:22

Can't see anything?

Best way is to put them in a div. Give the div the width you want the spread to be across.

Give each image the same class of image or whatever.

Float them left, width of say 28%. That leaves 16% for margin. Margin-left of 4% and they'll be across all nicey nicey as the last right margin will be the remaing 4%. Be sure to use box-sizing:border-box as you're working to 100% widths. Can get tricky otherwise in IE. padding and border set to 0 and none.

There was something I was reading the other day about using justify but I think it was for menu items rather then images.

The above is how I do image, don't think I missed anything.

Tripnologist · 9 Aug 2013 at 18:05

As the guy with the crazy name has said...
http://css-tricks.com/equidistant-objects-with-css/

UncleRuckus · 9 Aug 2013 at 18:16

Couldn't a bit of Maths sort this easily enough?

(div_width - total_width_of_all_images) / number_of_items = equal_space_between_items

Tobes · 9 Aug 2013 at 18:21

text-align:center;

padding-left:30px;
padding-right:30px;

This seemed to do it quite easily. I wanted it so I could just change the icons when I wanted without really having to mess around with dimensions.

Th3M8dH8tt3r · 9 Aug 2013 at 19:09

Tobes said:
text-align:center;

padding-left:30px;
padding-right:30px;

This seemed to do it quite easily. I wanted it so I could just change the icons when I wanted without really having to mess around with dimensions.

That work did it? It can be a bit hit and miss sometimes using things like text-align and line-height to get things centered.

If you wanted to make it so that the images were A) responsive to viewport and B) responsive to what images you used, you could use jquery to dynamically alter the height of the images while scaling the width, adjusting margins and centering them.

May be a little overkill perhaps?

Tobes · 9 Aug 2013 at 20:34

Haha a little over kill. The sites a project just to keep me sane through uni and to try and get a more adult gaming community together. It will probably really just be a splash page and possibly some forums. But I wanted something for now so I can have some Twitch streams and Youtube videos up and a domain. But looks ok to me for the moment. Just need to design my own background and logo now. Thanks for the ideas though people. Slowly learning CSS.

Th3M8dH8tt3r · 9 Aug 2013 at 21:00

Have a look at these lot for learning. Its $25 a month which isn't a lot and you'll learn tonnes very quickly .

https://teamtreehouse.com/

Doraku · 11 Aug 2013 at 01:30

^ TeamTreeHouse is great but there's also CodeAcademy!

In terms of keeping an element centre, check this out:

http://codepen.io/shshaw/full/gEiDt

JS is a hack solution for most problems (that you should avoid if possible) and CSS is riddled with problems like this but CSS can be very fun when you get the hang of it!

Th3M8dH8tt3r · 11 Aug 2013 at 13:11

CodeAcademy is good as well. I came across Treehouse first so that's the one I went with and don't have the time to be on another learning site, don't have enough time to be on Treehouse genning up these days.

I'll agree with using JS to do something that you should use CSS as being a hack but it's very useful if you want margins and sizing and positioning that changes depending on viewport size and size of the image.