Update: Found a better solution!

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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;}

.belt


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

.belt > div

.belt > div

.belt > div


Voila!

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


595 0 0