Foros del Web » Creando para Internet » CSS »

centrar imagen junto a texto dentro de un div

Estas en el tema de centrar imagen junto a texto dentro de un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/04/2016, 05:47
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 13 años, 10 meses
Puntos: 0
centrar imagen junto a texto dentro de un div

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.

Última edición por doberk; 24/04/2016 a las 07:28
  #2 (permalink)  
Antiguo 25/04/2016, 08:33
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 8 meses
Puntos: 26
Respuesta: centrar imagen junto a texto dentro de un div

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!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #3 (permalink)  
Antiguo 25/04/2016, 08:56
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: centrar imagen junto a texto dentro de un div

Cita:
Iniciado por DesgraciadoGabo Ver Mensaje
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.
  #4 (permalink)  
Antiguo 25/04/2016, 09:08
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 9 años, 8 meses
Puntos: 26
Respuesta: centrar imagen junto a texto dentro de un div

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!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #5 (permalink)  
Antiguo 26/04/2016, 00:54
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: centrar imagen junto a texto dentro de un div

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.

Etiquetas: float, junto, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:44.