如何将一列内的文本居中对齐？
[英]How can I center-align the text inside one column?
问题描述
我试图居中包含数字的<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>
我不想做：
<td align="center">3</td>
因为我不想将其添加到每个单元格中。 所以我尝试了这个：
<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>
并在我的CSS中添加了这些：
.centered {
text-align: center;
align: center;
float: center;
}
但它们似乎无效。
6 个解决方案
解决方案1
0 2018-02-16 07:32:08
试试这个
#tableId td
{
text-align:center;
vertical-align: middle;
}
要不就
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>
另外：这里不存在float：center。
解决方案3
0 2018-02-16 07:34:25
没有float: center这样的东西float: center
对于水平对齐，请使用text-align: center ；对于垂直vertical-align: middle使用vertical-align: middle 。
您的代码存在的问题是，您在表内部有div，这是无效的html语法。 将居中的类直接放在要居中的单元格上。
希望能有所帮助
解决方案4
0 2018-02-16 07:39:45
将类添加到表，然后在表数据上应用样式。
<!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
如果总是相同的列，则可以这样编写CSS规则：
/* Center 3rd column */
table td:nth-child(3) {
text-align: center;
}
或将第一，第二和第四列以外的所有内容居中：
/* 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
您没有在表中引用该类。
您的HTML应该如下所示：
请参见下面的代码段
$(".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>
很明显，如果您希望第一列之后的所有内容都居中对齐。
如何在不居中对齐内部文本的情况下居中对齐引导卡？
[英]How can I center align bootstrap cards without center aligning the text inside?
在Bootstrap 4.1中使col文本与背景颜色垂直居中对齐
[英]Vertically center-align col text with background color in bootstrap 4.1
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.