Menu
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?
244
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
Short answer: your text isn't centered because the elements are floated, and floated elements "shrink" to the content, even if it's a block level element.
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.
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.)
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
