I’m currently finishing off my tic tac toe game. The AI still needs some work but I’m currently trying to figure out how to stop the board from shifting down when text with the winner appears above it. Here’s my project https://codepen.io/gpiliponyte/full/zzXKLa/
As a suggestion, you can remove every <center> tag you have in your HTML and every text-align:center; from your CSS. Since you want everything centered, just give text-align:center; to the body. At that point, the only thing that won’t be centered will be the table, which you’ll be able to center using margin, like this:
.board > table {
margin:0 auto;
}
As for your question, maybe you could just have the result at the bottom of the table, instead of having it at the top?
It helped me out a lot even though in the end I decided to leave the text above the board because it wasn’t bothering me as much (especially when I added the ‘restart game’ button).
I have a few things I would like to ask you. Are tags considered bad practice? And
why
did the >table bit have to be specified in order for the board to be centered?
They aren’t but the center tag specifically isn’t supported in HTML5
It wasn’t necessary, but it’s just good practice to reference elements as correctly as possible. In .board > table the > sign selects a direct child (or children) of the element .board; as an example, if you had a structure like this: