将 TD Align="center" 转换为 CSS
Posted
技术标签:
【中文标题】将 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 语句。
感谢您的想法,以及对深入挖掘的鼓励。我正在撕掉我剩下的一点头发!
问候 约翰
【讨论】:
以上是关于将 TD Align="center" 转换为 CSS的主要内容,如果未能解决你的问题,请参考以下文章
<html:select> 页面返回时怎么让它显示我之前选择的值?
html<table>里的td如何单独控制文字垂直与水平位置?
如何用python把返回的html提取相应的内容到excel