I would like to add text to the center of each one of these tic tac toe blocks that says something along the lines of Pick Me! using the document.createTextNode()
and then .appendChild()
methods.
var text = document.createTextNode("Choose Me!");
var div = document.getElementById('block');
div.appendChild(text);
Also I created the tic tac toe layout but have been unable get them all centered as a group of div's inside one larger div. After trying a few of the methods I found on here I still had no luck.
.block{
display:inline-block;
background-color: azure;
border:2px solid black;
font-family: fantasy;
height:150px;
width:200px;
padding-top:5px;
justify-content: center;
position: relative;
}
body{
background-color: beige;
}
.game {
height:500px;
width:700px;
background-color: gainsboro;
margin-left: auto;
margin-right: auto;
}
And here is a jsfiddle link for a more clear picture of what's going on