Question

我遇到某个标记的问题，从外部源抓取。你会看到这个代码来自另一个网站，你也可以看到一个日期（例如15JuliMåndag）页面上有日期，我怎么能用CSS中心？尝试绝对定位，这导致所有日期都超过彼此。

我的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>

我的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
    });
}

看看我的小提琴，我不知道如何解决这个问题...

我想要的方式： Final

Answer 1

如果在td内动态生成范围，建议您将其设为display:block;并将其与margin:0 auto;

对齐

For Instance，

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

Answer 2

您可以使用CSS解决此问题，请参阅此处：http://jsfiddle.net/sMysu/6/
这是一个棘手的解决方法，但它确实有效：

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

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

Answer 3

<强>更新

经过深入分析后，我认为我得到了一个简单的解决方案。

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

从您的代码中，您在所有表之前都有一个空div .divider。所以使用CSS导航它可以工作。

选中此Fiddle

Answer 4

只需将vertical-align:middle用于显示日期的TD即可。当你从另一个站点获取它时，不会在你的标记中，所以将它用作CSS。

td{
   vertical-align:middle;
}

Updated Fiddle

Answer 5

尝试在你的css中使用text-align: center

Answer 6

要仅对齐中间指定区域中的文本，请使用以下内容：

.article table {
    vertical-align:middle;
}

Answer 7

您必须更改所获得的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/

您也可以删除所有宽度（仅$('table table td', article).css('width', '')而不是.each循环），并将table table tr td:first-child的宽度设置为css中的150px

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

如何在TD内部跨度？

7 个答案: