Search code examples
cssalignmenttext-align

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

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)

Solution

  • 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).