如何集中一个HTML表的内容?

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

如何使文本水平和垂直居中对齐?

1058637 次浏览
小开

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

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

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

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

HTML行样式示例:

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

CSS文件示例:

td {
text-align: center;
vertical-align: middle;
}
小开
最佳答案

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

小开

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

更多关于valign

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

是唯一正确的答案，因为你正在使用表格，这是最常用的电子邮件格式的旧功能。因此，最好的方法是不要只使用样式，而是使用内联样式和已知的表标记。

小开

选择器>子选项:

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

小开

下面的工作为我垂直对齐内容(多行)在一个列表-表

.. 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'的主题中，单元格条目定义为'stub'类。使用浏览器开发菜单检查单元格内容的主题类并相应地更新。

小开

如果你正在使用Bootstrap，你可以使用内置类

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

提交答案