如何使 HTML 表格的内容居中？答案

【问题标题】：How to center the contents of an HTML table?如何使 HTML 表格的内容居中？
【发布时间】：2012-02-17 15:58:54
【问题描述】：

我正在使用 HTML <table>，我想将 <td> 的文本与每个单元格的中心对齐。

如何将文本水平和垂直居中对齐？

【问题讨论】：

【解决方案1】：

这是一个带有 CSS 和内联 style 属性的示例：

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}

<table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

http://jsfiddle.net/j2h3xo9k/

编辑：valign 属性在 HTML5 中已弃用，不应使用。

【讨论】：

vertical-align:middle 不是应该应用于tr 元素吗？
如果你把一个img标签放在同一个td没有工作

【解决方案2】：

在 td 元素中居中文本的 CSS 是

td {
  text-align: center;
  vertical-align: middle;
}

【讨论】：

【解决方案3】：

行样式中的 HTML 示例：

<td style='text-align:center; vertical-align:middle'></td>

CSS 文件示例：

td {
    text-align: center;
    vertical-align: middle;
}

【讨论】：

【解决方案4】：

试着把它放在你的 CSS 文件中。

td {
    text-align: center;
    vertical-align: middle;
}

【讨论】：

【解决方案5】：

<td align="center" valign="center">textgoeshere</td>

恕我直言，这是唯一正确的答案，因为您使用的表格是最常用于电子邮件格式化的旧功能。所以你最好的选择是不要只使用样式，而是使用内联样式和已知的表格标签。

【讨论】：

valign 在 HTML5 中已弃用。不要使用它。对于电子邮件格式，style 标记或内联 style 属性将是最佳解决方案。

【解决方案6】：

选择器>子：

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}

<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

【讨论】：

【解决方案7】：

如果你使用的是 Bootstrap，你可以使用内置类

<table class="text-center align-middle">

【讨论】：

【解决方案8】：

以下内容对我来说可以垂直对齐列表中的内容（多行）

.. list-table::
   :class: longtable
   :header-rows: 1
   :stub-columns: 1
   :align: left
   :widths: 20, 20, 20, 20, 20

   * - Classification
     - Restricted
     - Company |br| Confidential
     - Internal Use Only
     - Public
   * - Row1 col1
     - Row1 col2
     - Row1 col3 
     - Row1 col4
     - Row1 col5

使用主题覆盖我定义的 .css 选项：

.stub {
       text-align: left;
       vertical-align: top;
}

在我使用“python-docs-theme”的主题中，单元格条目被定义为“存根”类。使用浏览器开发菜单检查单元格内容的主题类并相应更新。

【讨论】：

【解决方案9】：

<td align="center"valign="center">textgoeshere</td>