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)
编辑:由于这个答案被接受,我觉得有责任编辑在评论中引起火焰战争的部分,并且不要促进不良和过时的做法.
简单来说(请注意,为类名提出一个更好的名称,这只是一个例子):
.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)