Foros del Web » Creando para Internet » CSS »

Alinear texto a la derecha de una imagen centrado verticalmente

Estas en el tema de Alinear texto a la derecha de una imagen centrado verticalmente en el foro de CSS en Foros del Web. Hola gente, les pido su ayuda estoy haciendo un menu, cada boton es un pequeño icono y al lado agrego una pequeña frase, pero esta ...
  #1 (permalink)  
Antiguo 15/01/2009, 20:40
Avatar de BatiK  
Fecha de Ingreso: marzo-2003
Ubicación: Internet
Mensajes: 690
Antigüedad: 14 años, 8 meses
Puntos: 1
Alinear texto a la derecha de una imagen centrado verticalmente

Hola gente, les pido su ayuda

estoy haciendo un menu, cada boton es un pequeño icono y al lado agrego una pequeña frase, pero esta frase me queda muy abajo respecto al icono a su lado
Lo explico con una imagen:



como ven lo que quiero lograr es que icono y texto esten alineados verticalmente
  #2 (permalink)  
Antiguo 15/01/2009, 22:17
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Saludos BatiK!!

Te invito a visitar http://araudi.net esto seguro te ayudara en lo que buscas... sino te ayuda, seguro que te cambiara la idea y encontraras algo mejor!

Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 16/01/2009, 03:09
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Una opción al menos como yo lo haría es por medio de una lista... si cambias el icono de cada uno tendrás que especificar cada opción con una clase , y así puedes moverlo como quieras...

No te olvides de poner line-height

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama

Última edición por Aresillo; 16/01/2009 a las 06:14
  #4 (permalink)  
Antiguo 16/01/2009, 06:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

No te podemos ayudar si no sabemos cómo lo estás haciendo actualmente.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 16/01/2009, 16:19
Avatar de BatiK  
Fecha de Ingreso: marzo-2003
Ubicación: Internet
Mensajes: 690
Antigüedad: 14 años, 8 meses
Puntos: 1
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

CaLiZzZ no me sirvieron los que habia en esa web, gracias igual! ;)

Aresillo si te refieres a listas con <ul><li> no me sirve por el espacio que dejan,
no me molesta especificar cada opcion, ya que cada uno tiene un icono y texto diferente

Mikmoro todavia no lo hize pero estaba pensando hacerlo directamente en el link
<div><a href=""><img src=""></a> Texto1....</div>

sin usar .CSS
  #6 (permalink)  
Antiguo 16/01/2009, 16:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Cita:
Iniciado por BatiK Ver Mensaje
estoy haciendo un menu, cada boton es un pequeño icono y al lado agrego una pequeña frase, pero esta frase me queda muy abajo respecto al icono a su lado
Cita:
Iniciado por BatiK Ver Mensaje
Mikmoro todavia no lo hize pero estaba pensando hacerlo directamente en el link</div>
Desconcertadito me has dejado.

Cita:
Iniciado por BatiK Ver Mensaje
sin usar .CSS
Y por eso lo preguntas en el foro de CSS. De verdad, o no te has explicado bien o yo no te he entendido.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 16/01/2009, 21:24
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Cita:
Y por eso lo preguntas en el foro de CSS. De verdad, o no te has explicado bien o yo no te he entendido.
Creo que es la primera! ya que yo tampoco entendi... como preguntas una solucion en un foro CSS y dices que no usas CSS?
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #8 (permalink)  
Antiguo 16/01/2009, 22:19
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Sin usar estilo, creo que no te podemos ayudar, pero usando un sencillo css, por lo que he entendido, creo que esto te puede venir bien:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Título</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#envoltorio {
	margin-left: 15px;
	margin-top: 15px;
}
.caja {
	float: left;
}
.texto {
	font-family: Arial, Verdana; 
	font-size: 11px;
	float: left;
	margin-top: 8px;
	margin-left: 8px;
}
.separador {
	clear:both;
}
.separador-h {
	float: left;
	margin-left: 12px;
}
</style>
</head>

<body>
<div id="envoltorio">
<p>Montaje en vertical</p>
<br />
<!-- composición en vertical -->
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 1</div>
<div class="separador"></div>
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 2</div>
<div class="separador"></div>
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 3</div>
<!-- fin composición en vertical -->
<div class="separador"></div>
<br />
<hr />
<br />
<p>Montaje en horizontal</p>
<br />
<!-- composición en horizontal -->
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 1</div>
<div class="separador-h">&nbsp;</div>
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 2</div>
<div class="separador-h">&nbsp;</div>
<div class="caja"><img border="0" src="logo.png" width="30" height="30" alt="logo" /></div><div class="texto">Texto 3</div>
<!-- fin composición en horizontal -->
</div>
</body>

</html> 
Métele un logo.png de 30x30 px y podrás ver que el texto se centra respecto al logo. Naturalmente, tendrás que ajustar todas las medidas a tu diseño, no sólo el tamaño de las imágenes, también los márgenes.

Para una próxima ocasión, sigue el consejo de Mikmoro y pon el código con el que estás trabajando, para no ayudar a ciegas.

Saludos
  #9 (permalink)  
Antiguo 17/01/2009, 15:49
Avatar de BatiK  
Fecha de Ingreso: marzo-2003
Ubicación: Internet
Mensajes: 690
Antigüedad: 14 años, 8 meses
Puntos: 1
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

Gracias por la ayuda y consejos, me sirvieron mucho

.CSS me referia al archivo que se llama desde la pagina, style.css

y queria hacerlo con <style type="text/css"> desde el .html

bueno recien empiezo un saludo
  #10 (permalink)  
Antiguo 18/05/2011, 16:17
 
Fecha de Ingreso: mayo-2005
Mensajes: 13
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Alinear texto a la derecha de una imagen centrado verticalmente

solo ponle esto a tu imagen o al texto, dependiendo lo que quieres porner a la izquierda:

.alingV
{
float:letf;
}

Saludos desde Mérida, Yucatan...
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:19.