Come centrare una spanna all'interno di un TD?

Question

Ho un problema con un determinato tag, preso da una fonte esterna. Questo codice che vedrai è preso da un altro sito web e potresti anche vedere una data (ex 15 Juli Måndag) Ci sono date in tutta la pagina, come potrei centrarle con solo CSS? Provato con posizionamento assoluto, che porta ad avere tutte le date l'una sull'altra.

Fiddle here.

mio 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> 

miei 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 
    }); 
} 

controllare il mio violino, non so come affrontare questo problema ...

Come lo voglio:

Answer 1

si può risolvere con i CSS, vedere qui: http://jsfiddle.net/sMysu/6/
Si tratta di soluzione difficile, ma funziona:

td[valign="top"] { 
    display: block; 
} 

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

Answer 2

provare a utilizzare text-align: center nel CSS

Answer 3

AGGIORNAMENTI:

Dopo una profonda analisi, penso che ho avuto una soluzione semplice per questo.

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

dal codice, è necessario un div vuoto .divider prima di tutto tavolo. Quindi, usando la navigazione CSS funziona.

Scegli questa Fiddle

Answer 4

Basta usare vertical-align:middle a quella TD dove si sta mostrando date. Non sarà nel tuo codice ma come lo ricevi da un altro sito, quindi usalo come CSS.

td{ 
    vertical-align:middle; 
} 

Updated Fiddle

Answer 5

Per allineare solo i testi della zona specificata nell'uso mezzo il seguente:

.article table { 
    vertical-align:middle; 
} 

Answer 6

Se l'arco è generato dinamicamente all'interno del td, vi suggerisco di fare come display:block; e allinearlo al centro con margin:0 auto;

Per istanza,

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

Answer 7

Devi cambiare il codice HTML che si ottiene:

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/

È anche possibile farlo togliendo tutta la larghezza (quindi basta $('table table td', article).css('width', '') al posto del.ogni loop), e impostare la larghezza di table table tr td:first-child-150px nel CSS

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