¡Hola, Carla, espero que estés bien!
Para centrar los elementos dentro de una sección usando Flexbox, puedes utilizar la propiedad justify-content
. Tienes varias opciones dependiendo de cómo quieras distribuir el espacio:
justify-content: center;
: Esto centrará ambos elementos dentro de la sección, distribuyendo el espacio libre a ambos lados.
justify-content: space-around;
: Distribuirá los elementos con espacio alrededor de cada uno, lo que significa que habrá espacio antes, entre y después de los elementos.
justify-content: space-evenly;
: Distribuirá los elementos con espacios iguales entre ellos y los bordes del contenedor.
Cualquiera de estas opciones funcionará para centrar los elementos, así que puedes elegir la que mejor se adapte a tu diseño. Aquí tienes un ejemplo de cómo aplicarlo:
section {
border-style: solid;
border-color: red;
margin: 10%;
display: flex;
justify-content: center; /* O space-around, o space-evenly */
}
Espero que esto te ayude a posicionar tus elementos como deseas. ¡Bons estudos!