Hice una cuadrícula CSS básica, y ahora quiero colocar el texto dentro de los mosaicos en una posición determinada, pero no tengo idea de cómo hacerlo. Esta imagen debería mostrar lo que quiero decir:

enter image description here

El cuadro azul es donde quiero que esté el texto.

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 2fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 1150px;
  cursor: pointer;
}

.box1 {
  background: #3030c9;
  grid-area: 1 / 1 / 2 / 3;
}
<div class="tiles">
  <div class="box box1">
    <h1 id="text">Test</h1>
  </div>
  <div class="box box2">Test</div>
  <div class="box box3">Test</div>
  <div class="box box4">Test</div>
</div>
0
SirFail 2 oct. 2019 a las 22:13

3 respuestas

La mejor respuesta

Puede hacer que la clase box1 sea una columna flexible que se centre verticalmente, luego simplemente agregue un margen a la izquierda del encabezado.

.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 2fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 1150px;
  cursor: pointer;
}

.box2 {
  background: #7d30c9;
}
.box3 {
  background: #c93030;
}
.box4 {
  background: #30c9c9;
}

.box1 {
  background: #3030c9;
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box1 h1 {
  margin-left: 1em;
}
<div class="tiles">
  <div class="box box1">
    <h1 id="text">Test</h1>
  </div>
  <div class="box box2">Test</div>
  <div class="box box3">Test</div>
  <div class="box box4">Test</div>
</div>
0
GammaGames 2 oct. 2019 a las 19:37

Hay muchas maneras. Tu captura de pantalla no se pudo abrir para mí. De todos modos, si desea reemplazar el texto en una posición específica en el cuadro, seleccione primero el texto con id.

#text{
  margin-left:40%;
  margin-top:20%; // You can give px or rem 
}

Si desea alinear el texto, puede agregarlo a la clase de cuadro. Esto alinea tu texto de acuerdo con el cuadro

.box1 {
  background: #3030c9;
  grid-area: 1 / 1 / 2 / 3;
  text-align :center // or left ,right

}
0
Trinity 2 oct. 2019 a las 19:37

Agregue position: relative a .box1 y position: absolute a su etiqueta h1 y también configure los valores izquierdo y superior a su h1 como desee

-1
Angel Esguerra 2 oct. 2019 a las 19:34