在 HTML5 中重新定位按钮？

Question

我在一个页面上有 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>

Answer 1

为什么不像其他人那样使用 <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。

Answer 2

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

这个

<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>

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

Answer 3

该标签已在 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>

Link 到 fiddle

在 HTML5 中重新定位按钮？

Repositioning button in HTML5?

html

javascript

colors

button