1

tengo un problema con el texto al lado de un icono o img:

imagen que muestra el problema

lo que pasa es que quiero mostrar ese texto como por el centro de la imagen, pero que quede así, al lado de la imagen. Lo he intentado hacer con vertical-align: middle pero no funciona como verán a continuacion.

Código HTML:

<span>
    <img src="res/img/code-outline-icon.png" alt="icono de un codigo en una hoja">
    <h3>Lenguajes de programación y tecnologías</h3>
</span>

Código CSS:

.body-briefcase span {
    display: flex;
    margin-left: 5%;
    margin-top: 10%;
}

.body-briefcase span img {
    height: 48px;
    width: 48px;
}

.body-briefcase span h3 {
    vertical-align: middle;
    margin-left: 1em;
}

Por favor si alguien tiene alguna idea o la solución del problema que me la pase que con gusto la recibo.

2 respuestas 2

1

Ya que estás usando flex, agrega la propiedad align-items de css a tu span

.body-briefcase span {
    display: flex;
    margin-left: 5%;
    margin-top: 10%;
    align-items: center; /* esto alinea el contenido al centro verticalmente */
}
1
  • Si me sirvió mucho, gracias amigo el 9 mar. 2021 a las 20:58
1

Te comento lo siguiente:

  • El primer detalle que deberías corregir es que un elemento en línea como en este caso lo les el span no debe ser contenedor de un elemento en bloque como lo es en este caso el h1
  • Lo siguiente es que podría ser mas conveniente mover al título dentro de un contenedor propio y así poder acomodarlo mas fácilmente
    • Con este paso puedes de manera aislada desplazar al centro verticalmente al texto con respecto de su contenedor sin que la imagen se vea en cierto momento comprometida

Ejemplo:

    <style>
      :root {
        --acomodo-elementos: flex;
      }
      .contenedor-principal {
        display: var(--acomodo-elementos);
      }
      .contenedor-principal__imagen {
        border: 1px solid; /*esto no es necesario*/
        height: 150px; /*esto no es necesario*/
        width: 150px; /*esto no es necesario solo son para ejemplificar*/
      }
      .contenedor-principal__texto {
        align-items: center;
        border: 1px solid;
        display: var(--acomodo-elementos);
      }
    </style>
    <div class="contenedor-principal">
        <img class="contenedor-principal__imagen" src="ruta_imagen">
        <div class="contenedor-principal__texto">
          <h3>Lenguajes de programación y tecnologías</h3>
        </div>
    </div>

1
  • ok muchas gracias por la información el 9 mar. 2021 a las 20:58

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.