What is the best way to distribute multiple inline-block elements evenly?

Question

What is the best way to distribute multiple inline-block elements evenly?

Is it feasible to evenly distribute numerous elements in a div with adjustable width?

Check out this example that doesn't work. While using text-align:center; will center the elements, margin:0 auto; does not have any effect. I am aiming for something like a combination of justify and center:

|..<elem>..<elem>..<elem>..<elem>..|       // for one container width
|..<elem>..<elem>..<elem>..|               // for smaller container width
|....<elem>....<elem>....|                 // even smaller container

The container's size can be adjusted by the user. As the saying goes, a picture paints a thousand words:

Container (red box) width:100%; Therefore, the user has the ability to resize it (either through the browser window or JavaScript).
<--> denotes equal spacing. In the second row, <--> are larger because there is more space available. I managed to replicate this effect using:

text-align:center;
word-spacing:3em;    // although any fixed value will throw off the proportions

html positioning css

Answer 1

Answer №1

I came across a brilliant method that perfectly addresses your query.

In essence, all you have to do is apply text-align:justify; to the container element along with an additional invisible block at the end.

This technique works because inline-block elements are considered part of the text content, essentially representing a single word each.

By utilizing justify, the words in your text will be evenly distributed to fill the entire width of the element with uniform spacing between them. When it comes to inline-block elements, they will also be spaced out uniformly.

The mention of an extra invisible block at the end is crucial due to the fact that standard text-align:justify doesn't justify the last line of text. While this behavior is desired for regular text, aligning inline-block boxes requires all of them to be aligned.

To address this, add an unseen 100% width element at the conclusion of your inline-block elements. This phantom element essentially acts as the final line of text, enabling the justify technique to function correctly for the remaining blocks.

You can employ the :after pseudo-selector to generate the invisible element without necessitating alterations to your markup.

Please refer to the updated version of your jsFiddle provided for a practical demonstration: http://jsfiddle.net/ULQwf/298/

Additionally, the original article elaborating on this concept in greater depth can be found here:

[EDIT] Upon reviewing the image included in your query, I don't have a superior solution but I do possess some supplementary insights that may prove beneficial.

What would ideally resolve your issue is a :last-line selector. This would allow you to apply text-align:justify to the main text while centering the final line using text-align:center.

Regrettably, the lack of a :last-line selector eliminates this possibility, as only :first-line is recognized.

An alternative worth considering is the existence of text-align-last, which could fulfill your requirements:

text-align:justify;
text-align-last:center;

While this solution appears ideal, it is non-standard and possesses limited browser support.

You can explore more about this feature on MDN by following this link: read about here on MDN.

If absolute necessary, despite its partial browser support, this option could cater to some of your users. However, this isn't the most practical approach.

Despite my hopes for a better solution, it seems like this might be as close as you can get. The concept is almost within reach of achieving what you desire but falls slightly short. It's unfortunate because logically, it seems like a reasonable task to undertake.

Answer 2