centrar imagen junto a texto dentro de un div

[doberk]

Buenos dias, intento colocar una imagen (un icono) delante de un texto y centrar todo el conjunto, pero no se como hacerlo.

Con la propiedad float el icono no se centra, o lo hecho para la izquierda o para la derecha, pero no se puede centrar.

Si uso la propiedad text-align:center me centra la imagen y el texto, pero el texto me sale debajo de la imagen y no a su lado.

Se me ocurre hacer el div del tamaño exacto para que contenga el icono con float:left y el texto, y despues centrar el div. Pero cuando se modifique el texto se desajustará (el texto se modificará cada 15 días). Tendría que cambiar el tamaño del div cada vez que quiera cambiar el texto.

Lo ultimo que se me ocurre es convertir el icono a una fuente. ¿alguna otra idea sin tener que llegar a esto?

Gracias de antemano.

[DesgraciadoGabo]

Por qué se va a desajustar?

la solución la mencionas tú, crea un contenedor para la imagen, te dejo un ejemplo de como solucionarlo, aun que no entiendo bien eso de que se modifique el texto, no pienso que tenga nada que ver.
https://jsfiddle.net/u8mxdz3d/

Espero te sirva de lo contrario ayúdame a entender mejor tu duda, saludos!

[doberk]

Iniciado por DesgraciadoGabo

Por qué se va a desajustar?

la solución la mencionas tú, crea un contenedor para la imagen, te dejo un ejemplo de como solucionarlo, aun que no entiendo bien eso de que se modifique el texto, no pienso que tenga nada que ver.
[url]https://jsfiddle.net/u8mxdz3d/[/url]

Espero te sirva de lo contrario ayúdame a entender mejor tu duda, saludos!

Gracias, pero no era eso lo que pretendia. No se trata de rodear una imagen con texto (que para eso la propiedad float es lo ideal), si no de poner una imagen junto a una sola palabra y que el conjunto de ambos, imagen y palabra, aparezcan centrados.

Lo que me estaba sucediendo es que se me centra la imagen y la palabra, pero uno debajo del otro, en lugar de seguidos. Pero ya me he dado cuenta de cual es el problema: la palabra estaba encerrada en un tag <h1></h1>, y parece ser que este tag introduce un retorno de carro. En cuanto lo he cambiado por un span y le he dado tamaño con css se ha alineado con la imagen a la perfeccion.

De todas formas me he decidido a crear una fuente con mis iconos, ya que echando un vistazo por encima parece tener muchas utilidades.

[DesgraciadoGabo]

Woooooow ya ya entendí soy un babotas, si es bueno que lo tengas así como lo solucionaste ahora la idea de que tengas un h1 y lo cambies por un span dependerá de si era un titulo o no y si es un titulo que consideras importante google también lo consideraría así, esta etiqueta es importante amigo para posicionamiento natural.

te dejo una actualización según lo que yo entendí:
https://jsfiddle.net/u8mxdz3d/1/

Ya ahi dependerá de si quieres que sea una imagen o un icono tipo font awesome, saludos!

[doberk]

Ah, eso es, muchas gracias. No conocia la propiedad "display", es una buena solucion y muy sencilla, justo lo que andaba buscando.

Saludos y gracias.