1

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

No sé si me expliqué bien en el titulo pero este es mi problema: tengo una etiqueta nav que contiene al texto y deseo colocarla en medio de la altura de la imagen. Todo está dentro de un botón y el texto también será variable, por lo que el botón tiene que ajustarse a ello. Recién estoy empezando a ver CSS y HTML por lo que me es aún un poco difícil hacerlo para mi.

Gracias por su apoyo.

Mi código:

* {
    margin: 0;
    padding: 0;
}

/*Estilos Generales*/
.button {
    color: #000;
    display: inline-block; /*bloque en linea*/
    font-size: 1.25em; /* 20px*/
    margin: 2px;
    padding: 10px 0;
    text-align: left;
    min-width: 40%; /*al agregar un inline-block puedo agregar un width*/
    text-decoration: none;
    border: none;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 2px;
}
.rojo{
    background: #F13243;
}

.button img{
    float: left;
    margin-left: 10px;
    width: 50px;
}

.button span{
    position: relative;
    margin-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <button class="button rojo"><img src="https://cdn.pixabay.com/photo/2013/07/12/18/40/button-153684_960_720.png"/><span>hola</span></button>
</body>
</html>

1 respuesta 1

1

Lo primero que te recomiendo es cambiar el float:left por display:inline-block, al hacer esto podrás utilizar la propiedad vertical-align: center y así el texto y la imagen se centran verticalmente en relación a su contenedor que en este caso es un botón.

Para que el botón se ajuste a la longitud del texto te recomiendo asignarle un padding al botón en todos sus lados.

* {
    margin: 0;
    padding: 0;
}

/*Estilos Generales*/
.button {
    color: #000;
    display: inline-block; /*bloque en linea*/
    font-size: 1.25em; /* 20px*/
    margin: 2px;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    border: none;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 2px;
}
.rojo{
    background: #F13243;
}

.button img{
    display: inline-block;
    vertical-align: middle;
    width: 50px;
}

.button span{
    position: relative;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <button class="button rojo"><img src="https://cdn.pixabay.com/photo/2013/07/12/18/40/button-153684_960_720.png"/><span>Hola mundo</span></button>
</body>
</html>

Otra buena solución es usar display: flex en el botón y jugar con los valores de la propiedad margin tanto para la imagen como para el texto, así:

* {
    margin: 0;
    padding: 0;
}

/*Estilos Generales*/
.button {
    color: #000;
    display: flex;
    font-size: 1.25em; /* 20px*/
    margin: 2px;
    padding: 10px;
    text-align: left;
    text-decoration: none;
    border: none;
    box-shadow: rgba(0,0,0,0.5) 0px 2px 2px;
}
.rojo{
    background: #F13243;
}

.button img{
    margin: auto;
    width: 50px;
}

.button span{
    margin: auto auto auto 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <button class="button rojo"><img src="https://cdn.pixabay.com/photo/2013/07/12/18/40/button-153684_960_720.png"/><span>Hola mundo</span></button>
</body>
</html>

2
  • Muchas gracias amigo, te admiro. ¿Cómo podría o dónde aprender css? Porque veo que existen tantos estilos para aplicar y entender que a veces ni se por donde empezar. Commented el 10 jul. 2019 a las 17:03
  • @LeandroMorochoSoca pues realmente no sé, en internet existen muchos tutoriales, jejeje te recomiendo buscar en udemy o directamente el de w3schools, de igual forma si necesitas ayuda puedes hacer tu pregunta acá, aunque veo que ya tienes suficiente reputación para poder interactuar en el chat, allí también te resolverán las dudas, puedes buscarme yo mantengo allí cada día. Commented el 10 jul. 2019 a las 17:19

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.