How to center a span inside a TD?

Question

I have a problem with a certain tag, grabbed from an external source. This code you will see is taken from another website, and you could also see a date (ex. 15 Juli Måndag) There is dates all over the page, how could I center them with just CSS? Tried with absolute positioning, which leads to have all dates over each other.

Fiddle here.

My html:

    <div id="header">
    <div class="schema">
        <h1>Schema</h1>
    </div>
    <div class="back"><a id="back" href="index.html"></a>
    </div>
</div>
<div id="content">
    <div class="content" style="margin-top:0px;">
        <div class="article" style="text-align:center;">
            <!-- Här skrivs det ut en massa saker -->
        </div>
    </div>
</div>

My JS:

$(window).load(function () { //Fade
    $("#status").fadeOut();
    $("#preloader").delay(350).fadeOut("slow");
})
grabShedule();

function grabShedule() {
    var url = "http://1life.se/scraper/Schedule.php"; //URL
    $.getJSON(url, function (response) {
        var html = response.scraped[0].html; //Answer
        $('.article').append(html); //Answer is appended to .article
    });
}

Check out my fiddle, I don't know how to approach this problem...

How I want it:

Answer 1

If the span is dynamically generated inside the td, I suggest you to make it as display:block; and align it at the center with margin:0 auto;

For Instance,

td span{display:block; text-align:center; margin:0 auto;}