Question

我正在尝试将包含数字的<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;
}

但它们似乎不起作用。

Answer 1

试试这个

function testSubmit() {
    var card = getQueryVariable("select_card");
    var action = getQueryVariable("select_action");

    var urlGet = "/test/api/getting-ready?cardId=" + card + "&action=" + action;

    $.ajax({
        type : 'GET',
        url : urlGet,
        dataType : 'json',
        encode : true
    }).done(renderUserState);
}

function renderUserState(userState){
    $("#gold").text(userState.goldAmount);
}

或者只是

#tableId td 
{
    text-align:center;
    vertical-align: middle;
}

Answer 2

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>

另外：浮动：中心不存在。

Answer 3

没有float: center

这样的东西

对于水平对齐，请使用text-align: center，垂直使用vertical-align: middle。

你的代码的问题是你在表格中有div，这是无效的html语法。将居中的课程直接放在您想要居中的单元格上。

希望有所帮助

Answer 4

将类添加到表中并在表数据上应用样式。

＆＃13;

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

＆＃13;

Answer 5

如果它始终是相同的列，您可以像这样编写css规则：

/* Center 3rd column */
table td:nth-child(3) {
    text-align: center;
}

或者除了第1，第2和第4列以外的所有中心：

/* 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;
 }

Answer 6

您没有引用表格中的类。

您的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>

显然，如果您希望第一列之后的所有内容都居中对齐。

如何将文本居中对齐到一列中？

6 个答案: