Search code examples
htmlcssw3csemantic-markup

Pesky lil' <small> element not working with text-align, needs to be blocked

So you've tried to center the <small> HTML element with the CSS property text-align: center (or right) and it doesn't work?

small element resisting text-align

Well, that could be because your HTML/CSS looks something like this. There's an easy CSS solution...

If you set a small { display: block } property like this then it works like a charm:

small element being good

Horay!

But you can probably tell something's not right... and why does it work anyway?

Solution

  • Well, <small> is basically an inline element and the text-align property is to be applied to block elements and passed down to child inline elements (or strings inside).

    By making small into a block element we are allowing the text inside it to be styled.

    Also, the W3 spec defines the <small> element to be used inside a phrasing context — similarly to elements like <strong>, <b>, <span>, <a>, and so on — which would do the same thing in this case.

    W3 wiki examples suggest to put the <small> inside <p> tags and style that — I guess that's the more semantic solution, and here's the code if you need to see it.

    Why is this a bit confusing?

    Well, some 3rd party resources on the web don't mention it, or at least not explicitly. For example, the HTML5 Doctor's example uses the small element without a block element container around it.

    Hope that clarifies things! As always, please let me know if I missed anything. (And I think I did.)