Update: Found a better solution!


This is a shortened version of the post: http://radiatingstar.com/distribute-divs-images-equaly-line.

Short version, you'll need at least 3 CSS rule sets for: the outer belt, the inner elements and a pseudo-element for the outer belt.

  • .belt {text-align: justify;}

  • .belt > div {width: 100px; display: inline-block; vertical-align: top;}

  • .belt:after {content: ""; width: 100%; display: inline-block;}

To evenly center some divs in a row you'll need to create a "belt/row" div and give it the CSS:

.belt {text-align: justify;}


Then inside this you add the amount of elements you want in the row (images or divs). For the width property you can use px or %. These elements will need the following CSS:

.belt > div {width: 100px; display: inline-block; vertical-align: top;}

Followed by:

.belt:after {content: ""; width: 100%; display: inline-block;}

If your inner divs (the ones you want evenly spaced) have their own names that's fine, just change the CSS accordingly. You can also add margins if you like!


.belt > div

.belt > div

.belt > div


If you know any other or better ways of doing this, feel free to leave a comment, I'd love to hear about it!

652 0 0