CSS text-align for other stuff than text (like buttons)

Question

According to W3Schools the property is used to "align text within elements".

When using it in different ways however, like buttons, it also works perfectly. See this JsFiddle

Is it a good idea to use the align-text CSS property in situations like this or is something else a better solution like putting float: right on the button?

I was wondering if this attribute was intended only for text or if the name was just chosen poorly.

(as pointed out by Ray Toal, the answer is in the official W3C spec)

Answer 1

To be more accurate, it is used to align text and inline elements within their parents.

So spans, buttons, elements with display:inline-block and so on will be aligned according to text-align, whereas block-level elements are unaffected (but may inherit the container's text-align and apply it to further descendants).

Answer 2

Your use of text-align is perfectly fine here. Using floats would then need to clear following elements from their effects, etc

Perfectly fine: I wouldn't say that of the HTML code of your example (table, no label, no for/id association)