表格单元格中的文本居中答案

【问题标题】：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>

【问题讨论】：

标签： html html-table alignment center

【解决方案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>

【讨论】：