no soy muy bueno con el css
, a lo cual intento centrar los elementos verticalmente dentro de lo que es un col
de bootstrap he intentado con los margin
, pero no se alinea, también con align-content
, entre otros, un ejemplo de lo que he estado realizando, donde intento centrar los elemento de ambas columnas, pero claro las 2 llevan información diferente que puede cambiar el tamaño de los respectivos contenedores.
Todo esto realizado en reactjs
.main{
padding: 0px 12px;
height: 100vh;
background: linear-gradient(
to right,
hsl(197, 93%, 88%),
rgba(199, 255, 255, 0.815) 50%,
hsl(197, 93%, 88%) 100%
);
}
.info{
height: 150px;
background-color: blue;
}
.data{
background-color: green;
}
.title-center{
background-color:red;
}
.img{
width: 75px;
height: 50px;
background-color: blue;
border-radius: 10px;
margin-top:10px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class='main'>
<div class="row row vh-100 justify-content-around align-items-center">
<div class="col info">
<div class='title-center'>
<h3>title</h3>
<p>info lore</p>
</div>
</div>
<div class="col data" >
<div class='row'>
<div class='col'>
<div class='img'></div>
</div>
<div class='col'>
<div class='img'></div>
</div>
</div>
<div class='row'>
<div class='col'>
<div class='img'></div>
</div>
<div class='col'>
<div class='img'></div>
</div>
<div class='col'>
<div class='img'></div>
</div>
</div>
</div>
</div>
</div>
Como se puede observar en mi ejemplo, estoy mostrando todo en 2 columnas.
- Columna1(izquierda): Contiene textos explicativos y posiblemente una imagen vector u otro elemento visual.
- Columna2(derecha): Contiene varios
div
los cuales son separados en en otros 2 para mostrar un conjuntos de imágenes dentro, haciendo 1 fila de 2 imágenes y otra fila de 3 imágenes.
Mi problema es que no logro hacer que se centren correctamente los textos, anteriormente existía dicho problema con los div
azules, lo cual parece que se ha solucionado con: vh-100 justify-content-around align-items-center