Align text smartly

Align the text dynamtic

When text is occupy one line,it's centerd.When it broken to two left, align it to left.

When we are setting the parent container to text-align: center, we are saying the parent container to make all inline elements to align horizontally center.
So all child inline elements will obey the rule including inline-blocks as well.

inline-block elements grow wider max till 100%(considering padding and no width defined) of its parent based on its content. When the content text of figcaption is less, it’s aligned center by virtue of the property text-align-center; defined on its parent

As the text of children block grows into multiple lines, it keeps widening to the max width of its parent width. Now the magic starts! text-align: left; defined on children makes the content text left aligned.