Autor Tema: HTML tic tac hoe o juego del tres en raya cómo Centrar texto en HTML (Leído 3862 veces)

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

Código: [Seleccionar]

<!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

Código: [Seleccionar]

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

Kabuto · « **Respuesta #1 en:** 06 de Junio 2018, 20:51 »

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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: