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:
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>3 respuestas
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>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
}
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