The "text-align: center" isn't working in a span element

The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.

text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).

I recommend either changing the span to a <p> element, or specifying the display: block property on your span.

Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.

Hope that helps!


Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.

example:

<div style="text-align: center">Coded by AnnualMelons</div><br>