表格单元格中的文本居中
Posted
技术标签:
【中文标题】表格单元格中的文本居中【英文标题】：Center text in table cell 【发布时间】：2011-11-30 06:22:51 【问题描述】：我似乎无法找到我的问题的答案。我有一个两行两列的表格（如下所示的代码），如何将特定单元格中的文本居中对齐。我想将一两个单元格中的文本居中对齐 - 而不是所有单元格。
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
【问题讨论】：
【参考方案1】：我建议为此使用 CSS。您应该创建一个 CSS 规则来强制居中，例如：
.ui-helper-center
text-align: center;
然后将ui-helper-center 类添加到您希望控制对齐的表格单元格中：
<td class="ui-helper-center">Content</td>
编辑：既然这个答案被接受了，我觉得有义务编辑掉在 cmets 中引起激烈争吵的部分，并且不提倡不良和过时的做法。
请参阅Gabe's answer，了解如何将 CSS 规则包含到您的页面中。
【讨论】：
CSS 1 大约在 15 年前成为推荐。不要使用 align 属性。 @Quentin - 同意“不要使用 'align'”。但 Cory Larson 本人建议使用 CSS 等价物而不是“align=center”。我希望你不要标记他（如果你这样做了，请考虑改变它。好吗？） @paulsm4 — 我没有，我发表评论时他也没有。 感谢您的所有建议。我对css知之甚少。我应该将 CSS 规则放在我的代码中的什么位置？ @Jack - 在您的 html 文档的标题部分。理想情况下，您希望创建一个 css 包含文件并从标题链接它：htmlhelp.com/reference/css/style-html.html【参考方案2】：简单怎么样（请注意，为类名想一个更好的名字，这只是一个例子）：
.centerText
text-align: center;
<div>
<table style="width:100%">
<tbody>
<tr>
<td class="centerText">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td class="centerText">Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</div>
例如here
您可以将css 放在单独的文件中，建议这样做。
在我的示例中，我创建了一个名为 styles.css 的文件并将我的 css 规则放入其中。
然后将其包含在<head>部分的html文档中，如下所示：
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
替代方案，不创建单独的 css 文件，完全不推荐...
在 html 文档中的 <head> 中创建 <style> 块。然后把你的规则放在那里。
<head>
<style type="text/css">
.centerText
text-align: center;
</style>
</head>
【讨论】：
以上是关于表格单元格中的文本居中的主要内容，如果未能解决你的问题，请参考以下文章