Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Moniqa en 05 de Junio 2018, 10:11
-
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
-
Hola.
A mi me salen centrados, ¿con que navegador lo visualizas?
He probado con Opera, Chrome y MS Edge. Y con todos se ve bien. Lo unico que MS Edge no aplicar el color de fondo al body, pero los simbolos salen centrados.
Incluso con el viejo Internet Explorer sale centrado, aunque parece que no sabe ponerlos en formato de grilla.
No se porque no te sale bien a ti. La propiedad text-align: center debería funcionar en cualquier navegador.