12 ms·
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: | <figcap
by _kush 11y ago
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.
- eterm 11y agoThank 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 11y agoYes, I had to fiddle with the codepen example[1] to understand it correctly. 1: http://codepen.io/usablecode/pen/EjERem http://codepen.io/usablecode/pen/EjERem
- oneeyedpigeon 11y agoTo 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.
- 91bananas 11y agoI 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.