How to center the span inside a TD?

Question

I have a problem with a specific tag captured from an external source. This code that you will see is taken from another site, and you can also see the date (for example, 15 Juli Måndag). There are dates on the whole page, how can I focus them only on CSS? Tried with absolute positioning, which leads to the fact that all dates are the same.

The spell is 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 }); } 

Look at my fiddle, I don’t know how to approach this problem ...

How i want:

Answer 1

You can solve this with CSS, see here: http://jsfiddle.net/sMysu/6/
This is a complicated workaround, but it works:

 td[valign="top"] { display: block; } td[valign="top"][style="width: 15%"] { white-space: nowrap; display: table-cell; } 

Answer 2

If a range is dynamically generated inside td , I suggest you make it as display:block; and center it with margin:0 auto;

For instance

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

Answer 3

UPDATE:

After deep analysis, I think I have a simple solution for this.

 .divider + table>tbody>tr>td:first-child{ position: absolute; left:50%; } 

From your code, you have an empty div .divider in front of the whole table. So using CSS navigation works.

Tick Fiddle

Answer 4

try using text-align: center in your css

Answer 5

Just use vertical-align:middle for this TD , where you display the dates. There will be no markup in you, though, as you get it from another site, so use this as CSS.

 td{ vertical-align:middle; } 

Updated Fiddle

Answer 6

To simply align texts in a specified area in the middle, use the following:

 .article table { vertical-align:middle; } 

Answer 7

You must modify the resulting HTML:

 var html = response.scraped[0].html, article = $('.article'); //Svaret article .append(html); //Svaret skrivs ut i .article $('table table td', article).each(function () { var width = this.style.width; if (width == '85%') { width = ''; } else { width = '150px'; } this.style.width = width; }); 

http://jsfiddle.net/sMysu/10/

You can also do this by removing the entire width (so just $('table table td', article).css('width', '') instead of the .each loop) and set the width of the table table tr td:first-child to 150px in your css

http://jsfiddle.net/sMysu/9/