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.