Repositioning button in HTML5?

Question

I have 3 buttons on a page; one makes a soothing colour change, on makes a flashing colour change, and one should reset the page. However, the reset page button is not in the center. Please help: Here is my code:

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

score 2 · Answer 1 · edited May 23 '17 at 12:14

the tag is deprecated in HTML5 (see also: Why is the <center> tag deprecated in HTML?).

To easily center something in the middle, you can wrap your input element inside a div and style it accordingly (display:table;margin-left:auto;margin-right:auto;) as in:

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

Link to the fiddle

Zee · Answer 2 · 2015-05-27T15:44:26.367

Why don't you center it like you did others using <center>

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

Also your markup is not correct, you have 2 body elements, please correct it.

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

Note:

The center element is obsolete in HTML5, I would recommend you to use CSS instead.

score 0 · Accepted Answer · answered May 27 '15 at 15:40

You didn't wrap the reset button in a center tag.

This

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

</body>

should be like this

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

</body>

(I added some indentation for beauty and legibility. It never hurts to write nice looking code.)

Repositioning button in HTML5?

3 Answers3