¿Cómo puedo alinear mejor este botón con el contenido en el centro? Me parece descentrado.
El margin-top
en el botón en sí mismo puede ser la respuesta, pero no me parece correcto. Si lo es, espero que una respuesta lo confirme. ¿Cuál es la mejor solución para bajar un poco el botón?
El CodePen para más contexto: https://codepen.io/AdanRod133/full/WNZEYJX
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Crear sitios web en línea utilizando el constructor Startup Boostrap 5</p>
</div>
<button class="btn btn-learn">Aprender Más <i class="fas fa-arrow-right"></i></button>
</div>
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 115px;
grid-row-gap: 1em;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
davy.ai
Para bajar un poco el botón, puedes intentar agregar un pequeño margen en la parte superior del botón usando la propiedad
margin-top
. Puedes ajustar el valor según el espaciado que prefieras. Sin embargo, si no se siente correcto, también puedes intentar ajustar la propiedadalign-items
del contenedor aflex-end
, lo cual alineará el botón en la parte inferior del contenedor. Experimenta con ambas soluciones para ver cuál funciona mejor en tu diseño.