0

Estoy haciendo unas cartas, y el boton de Mas Info o Leer Mas Me queda abajo aca les dejo el codigo css y html. si alguien me ayuda les agradezco.

lo que quiero es que el texto quede acomodado y alineado con la el bloque de la carta no se si me explico. es como esta en la imagen es acomodarlo

.card-container {
    background-color: rgb(179, 179, 34);
    height: 150px;
    width: 190px;
    box-shadow: inset;
    border-radius: 4px;
    align-items: center;
    box-shadow: #30343a;
}
.card-button{
    background-color: white;
    padding: 10px 100px;
    color: black;
    text-decoration: none;
    text-align: center;
    box-shadow: #30343a;
    border-radius: 3px;
    display: inline-block;
}

.card-title {
  text-align: center;
  color:rgb(255, 255, 255);
}

.card-text {
    text-align: center;
    color:rgb(255, 255, 255);
}
<div class="card-container">
            <br>
            <h3 class="card-title">Lobatos</h3>
            <p class="card-text">6 a 11 años</p>
            <br>
            <br>

            <a href="#" class="card-button">Mas info</a>
        </div>

introducir la descripción de la imagen aquí

3
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 27 sept. 2022 a las 22:02
  • 1
    Hola! Bienvenidx a SOes. Por favor, relee tu pregunta, mira que no necesitabas añadir spam y revisa dónde nos dices qué es lo que quieres que pase. Ahora ve a editar, edita tu pregunta y explícanos sin spam, qué es lo que quieres que haga ese CSS en ese HTML
    – Alfabravo
    Commented el 27 sept. 2022 a las 22:09
  • listo, gracias perdon Commented el 27 sept. 2022 a las 22:11

1 respuesta 1

1

Prueba de la siguiente manera:

Al contenedor padre le puse un padding: 10px (el height es opcional, porque debe crecer en caso de haber más contenido)

A la etiqueta a que actúa como botón le puse un margen vertical de 10px y horizontalmente auto. También le puse un padding: 10px 0 (0 porque ya está centrado el texto, y si era 100px ya sobresalía del contenedor); y display: block para que esté debajo de los contenidos (p)

IMPORTANTE: en este caso no la etiqueta br para separar los contenidos. Usa margin: 10px auto, margin: 1rem 0, etc. por cada objeto hijo con display: block si es necesario.

Eso fue uno de tu error: el br. Porque el contenedor padre tiene un height fijo, pero había mucha separación entre sus contenidos con los br y algunos objetos salían fuera del contenedor

.card-container {
    background-color: rgb(179, 179, 34);
    height: 150px;
    width: 190px;
    padding: 10px 10px;
    box-shadow: inset;
    border-radius: 4px;
    align-items: center;
    box-shadow: #30343a;
}
.card-button{
    background-color: white;
    margin: 10px auto;
    padding: 10px 0;
    color: black;
    text-decoration: none;
    text-align: center;
    box-shadow: #30343a;
    border-radius: 3px;
    display: block
}

.card-title {
  text-align: center;
  color:rgb(255, 255, 255);
}

.card-text {
    text-align: center;
    color:rgb(255, 255, 255);
}
<div class="card-container">
            
            <h3 class="card-title">Lobatos</h3>
            <p class="card-text">6 a 11 años</p>
            

            <a href="#" class="card-button">Mas info</a>
        </div>

7
  • Gracias eso era lo que buscaba, pero te hago una consulta ¿como le puedo hacer un hover al boton que al poner el mouse sobre el boton nos salga el mismo texto con este signo imgur.com/ImTqL5Z? Commented el 28 sept. 2022 a las 16:39
  • Eso es propio del navegador, y funciona con las etiquetas a. Se podría evitar haciendo un botón normal, y al hacer click se abra el enlace que contiene el botón en un data- por ejemplo. Commented el 28 sept. 2022 a las 16:51
  • 1
    @TobiasCampomenosi no olvides marcar está respuesta con ✓ si te sirvió Commented el 28 sept. 2022 a las 16:52
  • 1
    @TobiasCampomenosi sí pues que si. Prueba con: margin: auto; o también margin: auto; margin-left: 10px o la distancia que deceas Commented el 28 sept. 2022 a las 17:04
  • 1
    @TobiasCampomenosi box-shadow: 5px 5px 4px 2px #123 y juega con los números Commented el 28 sept. 2022 a las 18:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.