Question

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

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:

Horay!

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

Answer 1

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