如何将一列内的文本居中对齐？
[英]How can I center-align the text inside one column?
问题描述
I am trying to center the <td> that contain numbers in them: 
我试图居中包含数字的<td> ：
<tr>
<td>October</td>
<td align="center">1</td>
<td>Cash</td>
<td></td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
I didn't want to do: 我不想做：
<td align="center">3</td>
because I didn't want to have to add that in each individual cell. 因为我不想将其添加到每个单元格中。 So I tried this: 所以我尝试了这个：
<tr>
<td>October</td>
<td align="center">1</td>
<td>Cash</td>
<td></td>
<div class="centered">
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</div>
</tr>
and added these in my css: 并在我的CSS中添加了这些：
.centered {
text-align: center;
align: center;
float: center;
}
but they don't seem to work. 但它们似乎无效。
6 个解决方案
解决方案1
0 2018-02-16 07:32:08
Try with this 试试这个
#tableId td
{
text-align:center;
vertical-align: middle;
}
OR just 要不就
td {
text-align:center;
vertical-align: middle;
}
解决方案2
0 2018-02-16 07:34:02
Try this method:
<tr> <td>October</td> <td align="center">1</td> <td>Cash</td> <td></td> <table align="center"> <tr><td>3</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td></tr> </table> </tr>
Also: There float:center doesn't exist. 另外：这里不存在float：center。
解决方案3
0 2018-02-16 07:34:25
There is no such thing as float: center 没有float: center这样的东西float: center
For horizontal alignment use text-align: center and for vertical use vertical-align: middle . 对于水平对齐，请使用text-align: center ；对于垂直vertical-align: middle使用vertical-align: middle 。
The problem with your code is that you have div inside table which is not valid html syntax. 您的代码存在的问题是，您在表内部有div，这是无效的html语法。 Put centered class directly to cell you want to center. 将居中的类直接放在要居中的单元格上。
Hope that helps 希望能有所帮助
解决方案4
0 2018-02-16 07:39:45
Add class to the table and apply style on the table data. 将类添加到表，然后在表数据上应用样式。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table.table1 tbody tr td { text-align: center; } </style> </head> <body> <table style="width:100%" class="table1"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html>
解决方案5
0 已采纳 2018-02-16 07:43:24
If it is always the same column(s), you can write your css rule like this: 如果总是相同的列，则可以这样编写CSS规则：
/* Center 3rd column */
table td:nth-child(3) {
text-align: center;
}
Or to center all but the 1st, 2nd, and 4th columns: 或将第一，第二和第四列以外的所有内容居中：
/* Center all columns */
table td {
text-align: center;
}
/* Override rule above to left align specific columns */
table td:nth-child(1), table td:nth-child(2), table td:nth-child(4) {
text-align: left;
}
/* Or simply apply 'text-left' class to desired td tags */
.text-left {
text-align: left;
}
解决方案6
0 2018-02-16 07:50:26
You are not referencing to the class in your table. 您没有在表中引用该类。
Your HTML should look something like this: 您的HTML应该如下所示：
See code snippet below 请参见下面的代码段
$(".cash table tbody tr td:first-child").addClass("non-centered");
.centered table, td { text-align: center; border: 1px solid #eee } .non-centered { text-align: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="cash"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="centered"> <tr> <td>October</td> <td align="center">1</td> <td>Cash</td> <td>3</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>
This is obviously if you want everything after the first column to be center aligned. 很明显，如果您希望第一列之后的所有内容都居中对齐。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.