14

我从外部来源获取的某个标签有问题。您将看到的这段代码取自另一个网站，您还可以看到一个日期（例如 15 Juli Må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
    });
}

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

我想要它： 最后

4

7 回答 7

15

如果跨度是在内部动态生成的td，我建议您将其设为 asdisplay:block;并将其与中心对齐margin:0 auto;

例如，

td span{display:block; text-align:center; margin:0 auto;}
于 2013-07-19T11:33:48.783 回答
8

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

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

td[valign="top"][style="width: 15%"] {
    white-space: nowrap;
    display: table-cell;
}
于 2013-07-19T11:51:09.553 回答
3

只需使用vertical-align:middle 显示TD日期的地方即可。当您从另一个站点获取它时，不会出现在您的标记中，因此请将其用作 CSS。

td{
   vertical-align:middle;
}

更新小提琴

于 2013-07-19T11:30:21.180 回答
3

更新：

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

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

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

检查这个小提琴

于 2013-07-19T11:28:21.683 回答
1

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

.article table {
    vertical-align:middle;
}
于 2013-07-19T11:31:38.210 回答
1

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

于 2013-07-19T11:27:41.573 回答
1

您必须更改您获得的 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 循环）来做到这一点，并在您的 css 中table table tr td:first-child设置宽度150px

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

于 2013-07-19T11:41:25.193 回答