Hola forer@s!
he creado la imagen de "tictatoe" con html, pero no consigo centrar las "x" y los "0" dentro de sus cuadros. Agradecería si alguien le puede echar un vistazo a mi código a ver qué he hecho mal...
Código HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tictactoe</title>
<link rel="stylesheet" href="tictactoe.css">
</head>
<body>
<div class="container">
<div class="box red">X</div>
<div class="box green"></div>
<div class="box yellow">O</div>
<div class="box blue"></div>
<div class="box orange">X</div>
<div class="box pink">O</div>
<div class="box lila">X</div>
<div class="box brown">O</div>
<div class="box grey"></div>
</div>
</body>
</html>
Código CSS
body {
background-color: rgba(0%, 0%, 0%);
}
.container {
display:grid;
grid-template-columns: 100px repeat(1,100px) 100px;
grid-template-rows: repeat(1, 100px 100px);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.box {
width: 100px;
height: 100px;
text-align: center;
font-size: 90px;
font-weight: bold;
font-family: sans-serif;
}
.red {
background-color: #02b3e4;
}
.green {
background-color: #02b3e4;
}
.yellow {
background-color: #02b3e4;
}
.blue {
background-color: #02b3e4;
}
.orange {
background-color: #02b3e4;
}
.pink {
background-color: #02b3e4;
}
.lila {
background-color: #02b3e4;
}
.brown {
background-color: #02b3e4;
}
.grey {
background-color: #02b3e4;
}
Muchísimas gracias de antemano por vuestro apoyo!
Moniqa