如何在html表格行中将文本居中对齐？

222

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

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

html css

— 拉贾戈帕尔웃
source

323

这是带有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中已弃用，不应使用。

— 大卫·拉伯格（David Laberge）
source

1

是否vertical-align:middle应该将其应用于tr元素？

— posfan12

53

将文本放在td元素中的CSS 是

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

— 卡斯滕
source

29

尝试将其放在您的CSS文件中。

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

— 鲍里斯
source

25

长手内联示例：

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

速记css示例：

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

— 海登·特林
source

5

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

唯一正确的答案是恕我直言，因为您使用的表格是电子邮件格式化中最常用的旧功能。因此，最好的选择是不仅使用样式，还应使用内联样式和已知的表标签。

— 雷米
source

5

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

— 肖恩·比恩

1

选择器>子：

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

展开摘要

— 费尔南多
source

-1

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

关于valign的更多信息

— 巴拉斯瓦米·瓦德曼（Balaswamy Vaddeman）
source

12

HTML5不支持valign属性。请改用CSS。

— 2014年