将 TD Align="center" 转换为 CSS

Posted 2023-03-06

【中文标题】将 TD Align="center" 转换为 CSS

【英文标题】：Converting TD Align="center" to CSS

【发布时间】：2020-08-31 12:28:40

【问题描述】：

我正在更新旧代码。该代码在表格单元格中绘制了一个图表，作为气象站输出的一部分。

有效的代码是：

<td style="width:33.33%; background-color:#FFFFFF" align="center">
<div id="windchill">small</div>
</td>

javascript 插入图形，结果对象居中。

我尝试了很多东西，但我认为正确的方法应该是：

<td style="width:33.33%; background-color:#EFEFEF;text-align:center;">
<div id="outsidetemp">small</div>
</td>

JavaScript 插入图形并将生成的对象拉到左侧。

我尝试使用 text-align:center; 在我的 CSS 中创建一个类，并将该类用于 TD 和 DIV（以及两者），但对象始终保持在左侧。

CSS中的表格和单元格定义是：

table 
    font-family: Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    border: 0;
    border-collapse: collapse;
    float: left;
/*    table-layout: fixed; */
/*    word-break: break-all;*/ /* debug */


td 
    white-space:normal;
//    text-align: left;
    vertical-align: top;
    font-size: 100%;
    padding-top: 0.2em;
    padding-right: 0.5em;
    padding-bottom: 0.2em;
    padding-left: 0.5em;
    color: #222222;

TR 或 DIV 没有任何内容。

我可以让它工作的唯一方法是在 TD 标签上使用已弃用的align="center" 标签。我真的很想让页面没有错误。 请问有什么想法吗？

【问题讨论】：

你试过 margin-left: auto;

谢谢 - 这是一个我没有尝试过的新的。我已将文本 align: center 替换为 margin-left: auto 但它仍然保持在左侧。我开始认为 JS 函数中一定有一些奇怪的东西，当它执行 document.getelementbyID 时会混淆 html……InnerHTML = 但不幸的是，这不是我的代码，我正在努力对其进行逆向工程。

您可以尝试在 innerHTML 更改后在 javascript 中设置 text-align 和/或 margin-left，但我的猜测是因为它使用的是 innerHTML 而不是 innerText 它正在破坏.话虽如此，我找不到任何原因，只是我通常被建议尽可能使用innerText。不过，这可能值得一试。

我不完全确定这是否可以应用，但我在 jsfiddle 上测试了这个程序，它似乎工作正常，但在 innerHTML 和 innerText 之间切换似乎什么也没做，所以可能是其他地方导致了问题。 jsfiddle.net/mf94a0w2/1

谢谢山姆。看来我需要花时间查看函数返回的内容。我现在必须离开它几天，但当我发现问题所在时，我会记下。至少你已经确认我正在努力做正确的事！

【参考方案1】：

值得深入研究填充单元格的 JavaScript。 结果中嵌入了一个 POSTION:RELATIVE CSS 语句。我只是在我的 shell HTML 中用 POSTION:STATIC 覆盖了它，并且一切正常 - 没有 TD 行中的 ALIGN 语句。

感谢您的想法，以及对深入挖掘的鼓励。我正在撕掉我剩下的一点头发！

问候 约翰