Javascript 使用td内部的链接将内联块元素居中

编辑：这里有一个JSBIN链接：如果有帮助

我拼命想把一个元素放在中间。 我尝试过文本对齐：在td外部/内部的div中居中。 它在链接和文本的样式类中设置

它看起来像是应用了文本对齐，但它并没有实现我想要的功能，即使整个内联块居中，而不仅仅是内部的链接/文本

我正在考虑使用HTML按钮，如果我不能让这个工作

td.TableButtonStyle {

    display: inline-block;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:auto; 
    margin-right:auto;
    color: white;
    background-color: rgb(240,80,40);
    font-weight: bold;

}
.TableButtonStyle a
{
    color:white;
    text-align:center;
}

.Bold
{
    font-weight: bold;
}

th.thCells{
    text-align:center;
    vertical-align:middle;
    font-size: 13pt;
    margin: 0px 5px;
}
td.TableCells {
    text-align:center;
    vertical-align:middle;
    font-size: 13pt;
    padding: 15px 25px;
    margin: 10px 50px;
}
</style>

<table style = "margin: 10px 0px">
    <tr>
        <th class = "TableCells thCells Bold" style = "padding: 0px 15px">Deduction per Pay Period</th>
    </tr>

    <tr>
        <td id = "button1" class = "TableButtonStyle" style = "font-size: 14pt; padding: 15px 25px"></td>
    </tr>

</table>

<script>

    var buttonText1 = "<a href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>";

document.getElementById("button1").innerHTML = buttonText1;

</script>

td.TableButtonStyle{
显示：内联块；
边界半径：10px；
文本对齐：居中；
垂直对齐：中间对齐；
边缘顶部：5px；
边缘底部：5px；
左边距：自动；
右边距：自动；
颜色：白色；
背景色：rgb（240,80,40）；
字体大小：粗体；
}
.表格按钮样式a
{
颜色：白色；
文本对齐：居中；
}
大胆的
{
字体大小：粗体；
}
th细胞{
文本对齐：居中；
垂直对齐：中间对齐；
字号：13pt；
利润率：0px 5px；
}
表细胞{
文本对齐：居中；
垂直对齐：中间对齐；
字号：13pt；
填充：15px 25px；
利润率：10px 50px；
}
每个工资期的扣除额
var buttonext1=“”；
document.getElementById（“button1”）.innerHTML=buttonext1；

您并没有占据整个桌子的宽度。我对你的问题的理解可能是错误的。但如果你想让“a”在你的“td”中居中。您应该将td更改为以下值（只需增加宽度）

---

您可能不应该将

元素设置为按钮。我强烈建议的是给你的

”；

---

您介意提供一些HTML吗？您是否尝试将总宽度设为th，将td（或td中的值）居中？设置为显示为inline块的td不会填充表格宽度——它是inline。它只会根据需要宽度。因此，它是居中的。在您的示例中，表格的宽度仅与最宽元素的宽度相同（本节为td）。如果您增加td的宽度，则表的宽度将增加。--也许您没有共享足够的示例标记？？似乎在这里起作用。您是否将其放入其中？@ntgCleaner，HTML是代码中心的表。您是说我应该包含所有内容吗？当我这样做时，会使内联块占用整个单元格，这不是什么我想要。我尝试将宽度设置为50%，但它仍然是左对齐的。在这种情况下，您将需要另一个div。TD将有100%，div是您按钮的大小，可以适当调整（根据需要），然后是您的内部div。例如，请参见：如果这是您需要的，请告诉我，我将用代码更新我的答案：）这让我更接近了，但是有没有办法不指定宽度就可以这样做呢？我希望单元格大小根据链接文本的长度而动态变化。谢谢你的帮助。出于好奇，为什么我不应该在td中使用按钮？td主要用作表单元格来保存信息。其中的

应该用作一个按钮，这不正常“而且可能不符合W3标准。就这些，非常感谢。你认为这个页面的按钮会更合适，但布局不同吗？目前，我只喜欢使用HTML、Javascript和CSS，还没有jquery或bootstrap，但我计划在某个时候学习，并可能应用到这个项目中。就布局而言，布局如何无关紧要，只要它在所有必要的浏览器上都能工作。就我个人而言，我从来不喜欢非表格数据的表格。但是如果它有效的话，那么，嘿，没人应该这么说！

<td id="button1" class="TableButtonStyle" style="font-size: 14pt; padding: 15px 25px; width:100%">

<td id = "button1" class="center-inside" style = "font-size: 14pt; padding: 15px 25px"></td>

td.center-inside {
  text-align:center
}
.TableButtonStyle {
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:auto; 
    margin-right:auto;
    color: white;
    background-color: rgb(240,80,40);
    font-weight: bold;
    padding:20px;
}

 var buttonText1 = "<a class='TableButtonStyle' href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>";