Next, I'm trying to do a tutorial to help my son in school so I help him and I still train a little JS. There would be several pages with one question and 3 choices If he does, a commemorative image appears, in case he misses a troll image appears. After selecting the answer the buttons turn off. Until then everything is fine, the problem is that the image is always positioned on the left and I would like to center so that it is below the question. I'm going to publish to a server inside the home network so it can access from the computer, my Iphone or a tablet and regardless of the screen size the image would always be below the question. If it's good and complete, maybe upload it to help more children with school difficulties ... Below is the code I'm using, thanks any help
<head>
<style>
#centro {
display: table;
margin-left:auto;
margin-right:auto;
}
</style>
<script>
function SIM() {
document.getElementById("NAO").setAttribute("disabled", "disabled");
document.getElementById("SIM").setAttribute("disabled", "disabled");
document.getElementById("NAO2").setAttribute("disabled", "disabled");
var src = "https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif";
show_image("https://media.tenor.com/images/b5b525642d31fc32571618da55f973e5/tenor.gif");
var br = document.createElement("BR");
var t = document.createTextNode("CERTO");
var br2 = document.createElement("BR");
var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
document.body.appendChild(br);
document.body.appendChild(t);
document.body.appendChild(br2);
document.body.appendChild(t2);
}
function NAO() {
document.getElementById("SIM").setAttribute("disabled", "disabled");
document.getElementById("NAO").setAttribute("disabled", "disabled");
document.getElementById("NAO2").setAttribute("disabled", "disabled");
var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
var br = document.createElement("BR");
var t = document.createTextNode("O CERTO SERIA");
var br2 = document.createElement("BR");
var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
document.body.appendChild(br);
document.body.appendChild(t);
document.body.appendChild(br2);
document.body.appendChild(t2);
}
function NAO2() {
document.getElementById("SIM").setAttribute("disabled", "disabled");
document.getElementById("NAO").setAttribute("disabled", "disabled");
document.getElementById("NAO2").setAttribute("disabled", "disabled");
var src = "http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif";
show_image("http://3.bp.blogspot.com/-71kMVORNutI/VFIbY9Sh7uI/AAAAAAAAFlw/2Ix-MqWV8RU/s1600/pie_in_face.gif");
var br = document.createElement("BR");
var t = document.createTextNode("O CERTO SERIA");
var br2 = document.createElement("BR");
var t2 = document.createTextNode("| | |3 + | | |3 = | | | | | |6");
document.body.appendChild(br);
document.body.appendChild(t);
document.body.appendChild(br2);
document.body.appendChild(t2);
}
function show_image(src, id,) {
var img = document.createElement("img");
img.src = src;
img.id = document.getElementById("centro");
document.body.appendChild(img);
}
</script>
</head>
<body TEXT=#C0C0C0 BGCOLOR=#000000 STYLE="background-color: #000000; color: #C0C0C0;">
<center>
<h1>Vamos Aprender???</h1>
2 X 3 =<br>
<button id="SIM" onclick="SIM();">6</button>
<button id="NAO" onclick="NAO();">8</button>
<button id="NAO2" onclick="NAO();">4</button>
</center>
</body>
</html>