span align mystery

[benbob]

The gremlins struck again.
I added a simple span to the style sheet for a few lines of text to center and display double size.

#span-3 { font-size: 2em; text-align: center;}

The text inside the span range happily changes size, but stays on the left. I checked 4 different sources that confirm this is how you do it, but Chrome, Firefox and Opera all keep it left aligned. I experimented with swapping "center for "right" and retyped it 3 times; the size changes with the value altered, but not the position.

What have I done wrong this time?
I don't have these problems with brain surgery.

[Stevie D]

The gremlins struck again.
I added a simple span to the style sheet for a few lines of text to center and display double size.

#span-3 { font-size: 2em; text-align: center;}

The text inside the span range happily changes size, but stays on the left. I checked 4 different sources that confirm this is how you do it, but Chrome, Firefox and Opera all keep it left aligned. I experimented with swapping "center for "right" and retyped it 3 times; the size changes with the value altered, but not the position.

What have I done wrong this time?

What you have to remember is that <span> is an inline element, so it shrink-wraps around its text or contents, and is always precisely the width needed for the text. What you've said is that you want the text to be centered within the <span>, but as the <span> is precisely the same width as the text, it will look exactly the same whatever alignment you choose, because there's no room for it to move.

You have a couple options, depending on what fits best with the rest of the code/layout:

• change the <span> to a <div>
• make the <span> behave like a <div> with {display:block;}

If you were wanting the text on the right, you could also apply float:right; to it, but there's no way to float anything to the middle.

[dresden_phoenix]

In order to apply text-align: the element must be able to have explicit width:. Only block-type elements have can have explicit width:.
In addition to what Steve D said: you could also set the element to display:inline-block; and widthsome width then thetext will center withing that element's width.

hope that helps