[_kush]

This is very cool. For those who didn't get it, here's how it works.

Initially, when figcaption text is short, it behaves something like this:

  |     <figcaption>    |

  |  <figcaption     >  |

  |<figcaption         >|

The text inside the figcaption element is always aligned left but the element itself is centered. When the text is longer, figcaption grows to a 100% width while the text is still aligned left.

[oneeyedpigeon]

To make your explanation spot on, you need to add some more text after "figcaption" in the latter two cases. This is the key point: an inline block will auto-width, by default, to its contents. In this technique, the contents will always be left-aligned, but the container centered.

[eterm]

Thank you, your explanation was a lot clearer than the one in the article which I found hard to read. I think it would have been much more clear if they had shown the markup for the content.

[_kush]

Yes, I had to fiddle with the codepen example[1] to understand it correctly.

1: http://codepen.io/usablecode/pen/EjERem

[91bananas]

I think what best explains this is modifying the .figcaption css to include a background color. This illustrates what that element actually does and how/why this works. Especially helpful if you don't have a really good understanding of the css `display` property.