How to evenly space many inline-block elements?

Question

Is it possible to evenly space many elements in a div with changeable width.

Here's not working example. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center:

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

Container will be user resizable. One picture is worth a 1000 words:

Container(red box) width:100%; So user can resize it (browser window, js, whatever).
<--> represent even spaces. In second row <--> are bigger because there is more room. I was able to fake it with:

text-align:center; word-spacing:3em;    // but any fixed value looses proportion 

Answer 1

I recently read about a very clever technique to do exactly what you're asking.

In short, you just need to use text-align:justify; on the container element to achieve this, in conjunction with an extra invisible block at the end.

This works because inline-block elements are seen as being part of the text content, each being effectively a single word.

Using justify will spread out the words in your text so that they fill the entire width of the element with extra space between the words. For inline-block elements, this means that they are spaced out with even spaces between them.

I mentioned an extra invisible block at the end. This is required because normal text-align:justify won't justify the last line of text. For normal text, that's exactly what you want, but for aligning inline-block boxes, you want them all to be aligned.

The solution is to add an extra invisible but 100% width element to the end of your list of inline-block elements. This will become effectively the last line of text, and thus the justify technique will work for the rest of your blocks.

You can use the :after pseudo-selector to create the invisible element without needing to modify your markup.

Here's an updated version of your jsFiddle to demonstrate: http://jsfiddle.net/ULQwf/298/

And here's the original article that explains it in more detail: http://www.barrelny.com/blog/text-align-justify-and-rwd/

[EDIT] One final update after seeing the image you've added to the question. (I don't have a better answer, but some additional thoughts that might be useful).

Ideally what you need here is a :last-line selector. Then you could text-align:justify the main text and text-align:center the last line. That would do what you want.

Sadly, :last-line isn't a valid selector (:first-line is, but not :last-line), so that's the end of that idea.

A slightly more hopeful thought is text-align-last, which does exist as a feature. This could do exactly what you want:

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

Perfect.

Except that it's non-standard and has very limited browser support.

You can read about here on MDN.

I guess as a last resort it might be an option for you, if you can live with only partial browser support. It would at least get what you want for some of your users. But that's not really a sensible way to go.

My gut feeling though is that this as as close as you're going to get. Tantalisingly close to what you want, but just not quite there. I hope I'm proved wrong, but I'll be surprised. Too bad though, because I it would seem like a perfectly logical thing to want to do.

Answer 2

I worked on your example, you have to make a combination of block / inline style since the justify alone just work for inline (text).

div{     width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */     border:1px red solid;     text-align:justify;    /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */  } div span{ /* I worked with your example you may use a class */     width:60px;     border:1px yellow solid;     display: inline-block; /* Inline-block */      position: relative; /* relative to container div*/ }  div:before{     content: ''; /* position for block element*/     display: block; /* the block part for the last item*/     width: 100%; }  div:after {     content: '';     display: inline-block; /* inline-block for the first (and middle elements) */     width: 100%; }