Question

我似乎无法找到问题的答案。我有一个包含两行和两列的表（如下所示的代码），如何在特定单元格中居中对齐文本。我想在一个或两个单元格中对齐文本 - 而不是所有单元格。

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

Answer 1

我建议使用CSS。您应该创建一个CSS规则来强制居中，例如：

.ui-helper-center {
    text-align: center;
}

然后将ui-helper-center类添加到您希望控制对齐的表格单元格中：

<td class="ui-helper-center">Content</td>

编辑：由于这个答案被接受了，我觉得有责任在评论中编辑引起火焰战争的部分，并且不要宣传不良和过时的做法。

请参阅Gabe's answer了解如何将CSS规则纳入您的网页。

Answer 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文档中的<style>中创建<head>块。然后将规则放在那里。

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>

表格单元格中的中心文本

2 个答案: