Question

I was wondering why short text does not seem to be affected by the text-align property once the following CSS3 technique for centering the text is applied (see the answer):

Vertical align text in block element

Here is the JSFiddle of that example with an added text-align:right property: http://jsfiddle.net/GqBAL/187/
(notice that here the text get’s aligned properly because it is long)

But once the text is short, it doesn’t work: http://jsfiddle.net/GqBAL/198/
Is there some kind of “reason” for that? What am I missing? I’d like to use the technique but for any text length, not just longer ones. Thank you!

Answer 1

I’m not sure about reason (most likely it has something to do with displaying content as a box). But there is a solution: use box-pack property. Adding

-webkit-box-pack: end;
-moz-box-pack: end;

to your example did the trick.