Question

I have a form that I create dynamically in javascript and end as follows:

mybreak=document.createElement("p");
form.appendChild(mybreak);

var buttonElement = document.createElement('button');
buttonElement.setAttribute("type","submit");
buttonElement.innerHTML="<img src=\"images/lock.png\"  width=\"80\" height=\"80\" alt=\"Submit\"/>Try it!";
form.appendChild(buttonElement);

This results in my submit button being left-aligned on the page. I would like it centered on the page instead. Adding in innerHTML centers the text within the button, which is not what I want. Adding an align = center attribute to my child has the same effect.

What’s the trick I am missing here to have that submit button nicely centered on the page?

Thanks

Answer 1

I feel odd answering my own question, but what I was after was understanding how to center my submit button strictly from javascript since I was creating the form dynamically and only needed that last submit button centered.

The solution is to simply modify my original code as follows:

 newDiv = document.createElement("div");
 newDiv.setAttribute("align","center");

 var buttonElement = document.createElement('button');
 buttonElement.setAttribute("text-align","center");
 buttonElement.setAttribute("type","submit");
 buttonElement.innerHTML="<img src=\"images/lock.png\"  width=\"80\" height=\"80\" alt=\"Submit\"/>Try it!";
 newDiv.appendChild(buttonElement);
 form.appendChild(newDiv);