Jak wyśrodkować przęsło wewnątrz urządzenia TD?

Question

Mam problem z pewnym tagiem, pobranym z zewnętrznego źródła. Ten kod, który zobaczysz, jest zaczerpnięty z innej strony internetowej, możesz również zobaczyć datę (np. 15 Juli Måndag). Na całej stronie są daty, jak mogę je wyśrodkować za pomocą samego CSS? Próbowałem z absolutnym pozycjonowaniem, co prowadzi do tego, że wszystkie daty się nawzajem.

Fiddle here.

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

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

Sprawdź moje skrzypce, nie wiem jak podejść do tego problemu ...

Jak tego chcę:

Answer 1

Można go rozwiązać z CSS, zobacz tutaj: http://jsfiddle.net/sMysu/6/
To skomplikowane obejście, ale to działa:

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

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

Answer 2

spróbuj text-align: center w css

Answer 3

aktualizacje:

po głębokiej analizie, myślę, że mam proste rozwiązanie tego problemu.

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

Z Twojego kodu masz pusty div .divider przed wszystkimi tabelami. Używanie nawigacji CSS działa.

Sprawdź to Fiddle

Answer 4

Wystarczy użyć vertical-align:middle do tego TD gdzie jesteś wyświetlanie dat. Nie będzie w tobie znacznika, ponieważ dostajesz go z innej strony, więc użyj tego jako CSS.

td{ 
    vertical-align:middle; 
} 

Updated Fiddle

Answer 5

po prostu wyrównać tekst w określonym obszarze w środkowej użyć następujących:

.article table { 
    vertical-align:middle; 
} 

Answer 6

Jeżeli rozpiętość jest dynamicznie generowane wewnątrz td, proponuję, aby jako display:block; i wyrównaj go w środku za pomocą margin:0 auto;

Dla instancji,

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

Answer 7

Trzeba zmienić HTML otrzymasz:

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/

Można również zrobić to poprzez usuwanie wszystkich szerokości (tak właśnie $('table table td', article).css('width', '') zamiast.każda pętla) i ustawić szerokość table table tr td:first-child do 150px w css

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