Centering text, but only when there’s just one line of it

I just spent a fair bit of time figuring this out and thought I’d document it in case someone else is looking for the same thing.

What I wanted to do was center some text if there was only one line, but left-align it if the text spilled over to a second (or more) line:

Screenshot 2016-02-21 19.09.50

After going down a bit of a rabbit hole w/r/t ::first-line and :text-align-last, and even considering employing some JavaScript, I realized there’s actually a pretty vanilla way of achieving the¬†effect:

div.parent { text-align: center; }
p.child { display: inline-block; clear: both; margin: 0 auto; text-align: left; }
Centering text, but only when there’s just one line of it

Leave a Reply

Your email address will not be published. Required fields are marked *