如何將一列內的文本居中對齊？
[英]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.