Horizontally spacing a row of images evenly

Question

I have a few rows of images like so

<div class="row">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
</div>

Each image has a different width, and there is also a different number of images on each row (4-6). I want to space the images evenly in the row, the row has a fixed width of 960px.

I could do this by calculating the total empty space for each row and then dividing it among the images for a margin, but I was hoping there was something simpler that I could apply to every row instead of having to calculate and code a separate one for each row.

@freebird, the questions I haven't accepted an answer for are ones that an adequate answer wasn't provided for. I doubt that will be a problem in this case. — Tesla, Oct 11 '12 at 05:39
If you can ignore IE < 8 you can do this with display: table; and display: table-cell; styles (you would probably need wrapper elements around each which would act as a table cells) — krcko, Oct 11 '12 at 05:39
@Shusl that centers the images in the div, it doesn't space them — Tesla, Oct 11 '12 at 05:41
@Shusl text-align: center wont work as it will not evenly position images (there would be much larger space on left and right side). Sadly, we cannot use text-align: justify for this.. — krcko, Oct 11 '12 at 05:41
@krcko I tried that and it wouldnt work properly but I tried to make the img tags display:table-cell rather than wrap it, i'll try with wrapping it — Tesla, Oct 11 '12 at 05:42
@krcko I tried it now with a wrapper around each img, it doesnt space them evenly, each cell just becomes as wide as the widest img in that column. Any solution with columns isn't going to work. — Tesla, Oct 11 '12 at 05:48
@Tesla look at this answer: http://stackoverflow.com/a/6880421/183569 — krcko, Oct 11 '12 at 06:03

score 0 · Answer 1 · answered Oct 11 '12 at 09:34

If you want to achieve something nice that only uses CSS (which isn't ideal since logic is required here) you could artificially resize the image widths to be the same (not recommended though) and simply add the appropriate margin. Knowing the width of each obviously help matters.

CSS:

.row img { 
display: inline; 
width: 100px; 
height: auto; 
margin: 0 20px 20px 0; 
padding: 0; 
}

Hope this helps? If you really want diverse and compacted layouts of images, try using jQuery with the Masonary plugin:

http://masonry.desandro.com/

It's so easy to use that it would practically be a crime not to leverage such a beautiful plugin!

I am actually using masonry on the same page but I dont think it is useful for this situation — Tesla, Oct 11 '12 at 14:05

score -1 · Accepted Answer · answered Oct 11 '12 at 15:31

-1

Doesn't seem this is doable with just css given that I dont want to calculate the margins for each row manually, so I just done it with jQuery

answered Oct 11 '12 at 15:31

Tesla

793
1
10
22

It's not an answer if you just say you have done it. Perhaps a jsFiddle is in order? – jerrygarciuh Jan 05 '14 at 19:36

Horizontally spacing a row of images evenly

2 Answers2