表格单元格中的中心文本

Jac*_*ens 35 html html-table center alignment

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

<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>
Run Code Online (Sandbox Code Playgroud)

Cᴏʀ*_*ᴏʀʏ 51

我建议使用CSS.您应该创建一个CSS规则来强制居中,例如:

.ui-helper-center {
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

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

<td class="ui-helper-center">Content</td>
Run Code Online (Sandbox Code Playgroud)

编辑:由于这个答案被接受,我觉得有责任编辑在评论中引起火焰战争的部分,并且不要促进不良和过时的做法.

请参阅Gabe关于如何将CSS规则包含到页面中的答案.

  • CSS 1成为大约15年前的推荐.不要使用align属性. (5认同)

Gab*_*abe 6

简单来说(请注意,为类名提出一个更好的名称,这只是一个例子):

.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>
Run Code Online (Sandbox Code Playgroud)

这里的例子

您可以将其css放在单独的文件中,建议使用该文件.在我的示例中,我创建了一个名为的文件styles.css并将其中的css规则放入其中.然后将其包含在html文档的以下<head>部分中:

<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
Run Code Online (Sandbox Code Playgroud)

替代方案,不创建单独的css文件,根本不推荐... 在html文档中创建<style><head>.然后将规则放在那里.

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>
Run Code Online (Sandbox Code Playgroud)