如何使 HTML tr（表格行）中的文本居中？

Posted 2023-03-05

【中文标题】如何使 HTML tr（表格行）中的文本居中？

【英文标题】：How can I get text in an HTML tr (table row) to center?

【发布时间】：2016-05-11 16:04:07

【问题描述】：

我正在 StringBuilder 中构建一些 html，如下所示：

builder.Append("<tr align='center' valign='top' class=\"skyBlueBackground textAlignCenter\">");
List<String> columnHeadings = GetColumnHeadings(monthCount, _begindate);
foreach (String s in columnHeadings)

    if (s.Equals("Grand Total"))
    
        builder.Append("<td align='left' valign='top' class=\"forestGreenBackground whiteText\"><b>");
    
    else
    
        builder.Append("<td align='left' valign='top'><b>");
    
    builder.Append(s);
    builder.Append("</b></td>");

builder.Append("</tr>");

虽然我有一个让文本居中的类：

builder.Append("</style>");
. . .
builder.Append(".textAlignCenter  text-align: center; ");
builder.Append("</style>");

...文本左对齐；它的工作原理与此不同（天蓝色背景），它只是保持向左磁化：

我必须怎么做才能使文本居中？

【问题讨论】：

那么文本左对齐，因为你有一个：align='left' 属性 + 如果你希望单元格的文本居中，请在该特定单元格上应用居中类。不知道你问的是不是这个。

td 单元格上的属性导致文本强制向左对齐。去掉它。

【参考方案1】：

您应该在 TD 而不是 TR 上设置 textAlignCenter 或将 CSS 定义更改为：

builder.Append(".textAlignCenter td  text-align: center; ");

并且您应该从 TD 中删除显式的“align='left'”，因为这仍然会推翻 CSS。

【参考方案2】：

如果您询问如何垂直对齐文本，您可以使用vertical-align CSS 属性。请参阅here 了解更多信息。

您也可以使用 valign 属性，但它在 HTML5 中已被弃用，因此不推荐使用。

【讨论】：

谢谢；我添加了垂直对齐：中间；上课。

【参考方案3】：

您的问题很简单，您已经正确创建了 css 类属性 .textAlignCenter，但 <td> 上的属性 align="left" 具有样式优先级。

---

我认为你可以做两种解决方案：

将 .textAlignCenter 类放在要对齐的 td 上 中心。

删除 td 的 align="center" 并添加一个类似的 css 这个：

tr td text-align:left

tr td.textAlignCenter text-align:center

---

使用最后一个解决方案，您会覆盖最后一个样式。