HTML5中的重新定位按钮？答案

【问题标题】：Repositioning button in HTML5?HTML5中的重新定位按钮？
【发布时间】：2015-08-09 19:22:59
【问题描述】：

我在一个页面上有 3 个按钮；一个是柔和的颜色变化，一个是闪烁的颜色变化，一个应该重置页面。但是，重置页面按钮不在中心。请帮忙：这是我的代码：

<html>
<head>
</head>
<body>
 <SCRIPT LANGUAGE="JavaScript">
function iwarnedyou(){
intrvl=0;
for(nTimes=0;nTimes<9999;nTimes++){
intrvl += 1500;
setTimeout("document.bgColor='#8CD19D';",intrvl);
intrvl += 1500;
setTimeout("document.bgColor='#ACDEB2';",intrvl);
intrvl += 1500;
setTimeout("document.bgColor='#BFD8AD';",intrvl);
   }
}
</SCRIPT>
<center>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Soooothe." onClick="iwarnedyou()">
</FORM>
</center>
<br/><div style="clear:both"></div><div><a target="_blank" href="Georgeocodes.github.io/"><span style="font-size: 8pt; text-decoration: none">George O Codes</span></a></div>
</body>

<body>
 <SCRIPT LANGUAGE="JavaScript">
function iwarnedu(){
intrvl=0;
for(nTimes=0;nTimes<9999;nTimes++){
intrvl += 100;
setTimeout("document.bgColor='#FFFFFF';",intrvl);
intrvl += 100;
setTimeout("document.bgColor='#000000';",intrvl);
   }
}
</SCRIPT>
<center>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Nightmare. [Warning: Flashing]" onClick="iwarnedu()">
    </FORM>
</center>

<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>

</body>



</html>

【问题讨论】：

标签： javascript html button colors

【解决方案1】：

该标签在 HTML5 中已弃用（另请参阅：Why is the <center> tag deprecated in HTML?）。

为了轻松地将某些内容居中，您可以将输入元素包装在 div 中并相应地设置其样式（display:table;margin-left:auto;margin-right:auto;）为在：

<div style="display:table;margin-left:auto;margin-right:auto;">
    <input type="BUTTON" value="will be positioned in the center">
</div>

链接到fiddle

【讨论】：

【解决方案2】：

你为什么不像其他人一样使用<center>来居中

<center>
   <FORM>
    <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
   </FORM>
</center>

您的标记也不正确，您有 2 个 body 元素，请更正。

<body>
  <SCRIPT LANGUAGE="JavaScript">
    function iwarnedyou() {
      intrvl = 0;
      for (nTimes = 0; nTimes < 9999; nTimes++) {
        intrvl += 1500;
        setTimeout("document.bgColor='#8CD19D';", intrvl);
        intrvl += 1500;
        setTimeout("document.bgColor='#ACDEB2';", intrvl);
        intrvl += 1500;
        setTimeout("document.bgColor='#BFD8AD';", intrvl);
      }
    }
  </SCRIPT>
  <center>
    <FORM>
      <INPUT TYPE="BUTTON" VALUE="Soooothe." onClick="iwarnedyou()" />
    </FORM>
  </center>
  <br/>
  <div style="clear:both"></div>
  <div><a target="_blank" href="Georgeocodes.github.io/"><span style="font-size: 8pt; text-decoration: none">George O Codes</span></a>
  </div>
  <SCRIPT LANGUAGE="JavaScript">
    function iwarnedu() {
      intrvl = 0;
      for (nTimes = 0; nTimes < 9999; nTimes++) {
        intrvl += 100;
        setTimeout("document.bgColor='#FFFFFF';", intrvl);
        intrvl += 100;
        setTimeout("document.bgColor='#000000';", intrvl);
      }
    }
  </SCRIPT>
  <center>
    <FORM>
      <INPUT TYPE="BUTTON" VALUE="Nightmare. [Warning: Flashing]" onClick="iwarnedu()" />
    </FORM>
  </center>
  <center>
    <FORM>
      <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh" />
    </FORM>
  </center>
</body>

注意：

中心元素在 HTML5 中已过时，我建议您改用 CSS。

【讨论】：

【解决方案3】：

您没有将重置按钮包裹在中心标签中。

这个

<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>

</body>

应该是这样的

<center>
    <FORM>
        <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
    </FORM>
</center>

</body>

（我为美观和易读性添加了一些缩进。编写好看的代码永远不会有坏处。）

【讨论】：