Ayuda alinear Iconos y texto.
-
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]
-
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.Poniendo middle y margen inferior a 16 px quedaría así: ver imagen.
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.
.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.
¿Dónde estás poniendo ese código? Acabo de mirar la página y no aparece.
Como he visto que no hacia nada no lo he guardado.
¿Pero esta bien o le falta o sobra algo? No se ha inmutado ni tan siquiera se ha descolocado nada como otra veces.
Edita la página, pon el código, la guardas y avisas para echarle un vistazo.
Acabo de editar la pagina y guardado. Pero sigue sin inmutarse ninguno de los dos elementos cambiados. ¿¿??
- Esta respuesta fue modificada hace 6 años, 8 meses por viveafrica.
Es que has puesto «vertical-aling» y es «vertical-align»
Pon
style="vertical-align: middle;margin-bottom: 15px;"
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).
De nada. Un saludo.
- El debate ‘Ayuda alinear Iconos y texto.’ está cerrado a nuevas respuestas.