Html 如何在 TD 内居中跨度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17744934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center a span inside a TD?
提问by Hyman
I have a problem with a certain tag, grabbed from an external source. This code you will see is taken from another website, and you could also see a date (ex. 15 Juli M?ndag) There is dates all over the page, how could I center them with just CSS? Tried with absolute positioning, which leads to have all dates over each other.
我从外部来源获取的某个标签有问题。您将看到的这段代码取自另一个网站，您还可以看到一个日期（例如 15 Juli M?ndag） 页面上到处都是日期，我如何仅用 CSS 将它们居中？尝试使用绝对定位，这会导致所有日期相互重叠。
My html:
我的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:
我的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
});
}
Check out my fiddle, I don't know how to approach this problem...
看看我的小提琴，我不知道如何解决这个问题......
How I want it:
我想要它的方式：
采纳答案by Cherniv
You can solve it with CSS , see here: http://jsfiddle.net/sMysu/6/
It is tricky workaround , but it works:
您可以使用 CSS 解决它，请参见此处：http: //jsfiddle.net/sMysu/6/
这是棘手的解决方法，但它有效：
td[valign="top"] {
display: block;
}
td[valign="top"][style="width: 15%"] {
white-space: nowrap;
display: table-cell;
}
回答by Nitesh
If the span is dynamically generated inside the td, I suggest you to make it as display:block;and align it at the center with margin:0 auto;
如果跨度是在 内部动态生成的td，我建议您将其设为 asdisplay:block;并将其与中心对齐margin:0 auto;
For Instance,
例如，
td span{display:block; text-align:center; margin:0 auto;}
回答by Praveen
UPDATES:
更新：
After a deep analysis, I think I got a simple solution for this.
经过深入分析，我想我得到了一个简单的解决方案。
.divider + table>tbody>tr>td:first-child{
position: absolute;
left:50%;
}
From your code, you have a empty div .dividerbefore all table. So using CSS navigation it works.
从您的代码中，您.divider在所有表之前都有一个空的 div 。所以使用 CSS 导航是可行的。
Check this Fiddle
检查这个小提琴
回答by Dhaval Marthak
Just use vertical-align:middleto that TDwhere you are showing dates. Will not be in you markup though as you are getting it from another site, so use this as CSS.
只是使用vertical-align:middle到TD你在哪里显示日期。不会在你的标记中，因为你是从另一个站点获取的，所以将它用作 CSS。
td{
vertical-align:middle;
}
回答by user1983983
To just align the texts in the specified area in the middle use the following:
要仅对齐中间指定区域中的文本，请使用以下命令：
.article table {
vertical-align:middle;
}
回答by Romko
try using text-align: centerin your css
尝试text-align: center在你的 css 中使用
回答by dievardump
You have to change the HTML you get:
你必须改变你得到的 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;
});
You also can do it by removing all the width ( so just $('table table td', article).css('width', '')instead of the .each loop), and set the width of table table tr td:first-childto 150pxin your css
您也可以通过删除所有宽度（所以只是$('table table td', article).css('width', '')而不是 .each 循环）来做到这一点，并在您的 css 中设置table table tr td:first-childto的宽度150px
