span versus div

[marain]

This works:


<div style="text-align:center; ">Far Hills</div>

This doesn't:


<span style="text-align:center; ">Far Hills</span>

Can someone please explain why?

(I think someone answered this for me years and years ago. I tried to find the thread, failed.)

A.

[keyboard]

Try the following html -

<div style="text-align:center;background-color:red">Far Hills</div>
<span style="text-align:center;background-color:green">Far Hills</span>

The div tag is a "block" element and its default width is 100% of the page.
The span tag is an "inline" element and its default width is the width of its contents.

Because of this, the center on the div tag puts the text in the middle of the div (which is in the middle of the page), but the center on the span does nothing as the width is just the size of the contents.