Alinear texto a la derecha de una imagen centrado verticalmente

BatiK · #1 (**permalink**) 15/01/2009, 20:40

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

Calizman · #2 (**permalink**) 15/01/2009, 22:17

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!

Aresillo · #3 (**permalink**) 16/01/2009, 03:09

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

Mikmoro · #4 (**permalink**) 16/01/2009, 06:07

No te podemos ayudar si no sabemos cómo lo estás haciendo actualmente.

BatiK · #5 (**permalink**) 16/01/2009, 16:19

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

Mikmoro · #6 (**permalink**) 16/01/2009, 16:34

Cita:

Iniciado por BatiK

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

Mikmoro todavia no lo hize pero estaba pensando hacerlo directamente en el link</div>

Desconcertadito me has dejado.

Cita:

Iniciado por BatiK

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.

Calizman · #7 (**permalink**) 16/01/2009, 21:24

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?

ssclamp · #8 (**permalink**) 16/01/2009, 22:19

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

BatiK · #9 (**permalink**) 17/01/2009, 15:49

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

gcordoba · #10 (**permalink**) 18/05/2011, 15:17

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...