Soporte » Guías – Resolución de problemas » Ayuda alinear Iconos y texto.

  • Resuelto viveafrica

    (@viveafrica)


    Hola a todos. Estoy teniendo un problema con la edición de wordpress. No sé si podréis ayudarme en este apartado. Os expongo el asunto:
    Estoy trabajando el apartado “Contacto” en mi página. He añadido unos iconos de “mail, teléfono, web…” son imágenes en PNG de 40×40, intento añadir el texto seguido al icono y nunca queda en la misma línea al icono, siempre el texto queda más bajo, ya he probado de varias maneras. Poniendo primero el icono y luego el texto y viceversa. He probado con alineación derecha y sin alineación, pero nunca lo deja en la misma línea, siempre queda algo desplazado hacia abajo. Podría añadir el icono y el texto editado como imagen total, pero el texto sale algo desenfocado al pasarlo a wordpress. Esta sería la última opción si lo que intento es imposible hacerlo en el editor de wordpress.
    Os pongo un enlace a una carpeta en Drive con imagenes para consultar.

    https://drive.google.com/open?id=1CEXNzDFrCAc-36cvMjfoXJi_Kdh8TjKb

    Espero que podáis ayudarme.
    Si necesitáis algún dato mas no dudéis en solicitármelo.
    Gracias a todos.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • Moderador almendron

    (@almendron)

    Prueba con vertical-align y el valor «middle». Luego, podrías ajustar un poco más tocando el margen inferior.
    Eso sí, tendrás que crear una regla para esa imagen en concreto ya que si lo aplicas a la regla «.article img, img.article, .block img, .footer-text img» afectará todas las imágenes.

    Moderador almendron

    (@almendron)

    Poniendo middle y margen inferior a 16 px quedaría así: ver imagen.

    Iniciador del debate viveafrica

    (@viveafrica)

    Gracias Almendron.
    No se mucho de HTML o CSS es mi primera web. Quizas seria mucho pedir, pero antes de hacer una tonteria y cargarme todo, podrias decirme como hacerlo. Te envio las lineas a cambiar en un documento de Block de notas. Sobre todo me suena a chino lo de crear una regla (Eso sí, tendrás que crear una regla para esa imagen en concreto ya que si lo aplicas a la regla «.article img, img.article, .block img, .footer-text img» afectará todas las imágenes.)

    <p style=»text-align: left; line-height: 13px;»><img class=»lightbox»
    src=»http://elementor.viveafricalibre.com/wp-content/uploads/2018/03/Correo.png» alt=»» width=»40″
    height=»40″ /> <span style=»font-size: 14pt;»><span style=»font-family: Arial, Helvetica, sans-
    serif;»>info@viveafricalibre.com</span>
    </span></p>

    Si es en CSS no se ni dónde debo de tocar.
    .

    Iniciador del debate viveafrica

    (@viveafrica)

    Bueno, despues de mucho mirar voy viendo algo mas claro. Pero parece que algo me falta o me sobra. He modificado el codigo añadiendo lo que me habeis dicho y no hace absolutamente nada. ¿Que estoy haciendo mal?

    Este es el original:
    <p style=»text-align: left; line-height: 13px;»><img class=»lightbox»
    src=»http://elementor.viveafricalibre.com/wp-content/uploads/2018/03/Internet.png» alt=»» width=»40″
    height=»40″ /> <span style=»font-size: 14pt;»><span style=»font-family: Arial, Helvetica, sans-
    serif;»>www.viveafricalibre.com</span>
    </span></p>

    Este el modificado:
    <p style=»text-align: left; «><img style=»vertical-aling: middle;» class=»lightbox»
    src=»http://elementor.viveafricalibre.com/wp-content/uploads/2018/03/Internet.png» alt=»» width=»40″
    height=»40″ /> <span style=»font-size: 14pt;»><span style=»font-family: Arial, Helvetica, sans-
    serif;»>www.viveafricalibre.com</span>
    </span></p>

    Si podeis echarme una mano, aunque sea al cuello. Os lo agradeceria.

    Moderador almendron

    (@almendron)

    ¿Dónde estás poniendo ese código? Acabo de mirar la página y no aparece.

    Iniciador del debate viveafrica

    (@viveafrica)

    Como he visto que no hacia nada no lo he guardado.

    Iniciador del debate viveafrica

    (@viveafrica)

    ¿Pero esta bien o le falta o sobra algo? No se ha inmutado ni tan siquiera se ha descolocado nada como otra veces.

    Moderador almendron

    (@almendron)

    Edita la página, pon el código, la guardas y avisas para echarle un vistazo.

    Iniciador del debate viveafrica

    (@viveafrica)

    Acabo de editar la pagina y guardado. Pero sigue sin inmutarse ninguno de los dos elementos cambiados. ¿¿??

    • Esta respuesta fue modificada hace 3 años por viveafrica.
    Moderador almendron

    (@almendron)

    Es que has puesto «vertical-aling» y es «vertical-align»

    Pon style="vertical-align: middle;margin-bottom: 15px;"

    Iniciador del debate viveafrica

    (@viveafrica)

    Gracias, amigo.
    Es la torpeza del principiante. Estaré más atento a partir de ahora. Las letras bailan delante de tus ojos y no las ves por mucho que mires y mires.
    Tampoco había puesto «margin-bottom: 15px;»

    Con esta tontería ya he aprendido un huevo de HTML. (Al menos, eso me creo yo).

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

Viendo 12 respuestas - de la 1 a la 12 (de un total de 12)
  • El debate ‘Ayuda alinear Iconos y texto.’ está cerrado a nuevas respuestas.