Alinear Texto con Imagen

AbimaelAlejandroMT · #1 (**permalink**) 18/02/2012, 11:58

Tengo un pequeño problema, quiero que el texto quede centrado a la imagen y siempre queda en la parte inferior..

aca les dejo una imagen la primera es como esta.. y la segunda es como quiero ponerlo

en la web la tengo asi

<li class="texto">', TEXTO, ' <img src="/image/test.png" class="imagen"/></li>';

y en el css la tengo asi

.texto
{
font: Tahoma, Helvetica, Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
color: #b5b5b5;
text-shadow: 0 2px 0px #e9e9e9;
}
.texto img.imagen
{
height:40px;
width:70px;
}

Ya he jugado con los margenes... con la posición con todo y nada.. :S me pueden ayudar! :S soy un novato en esto! Gracias de ante mano!

xFantaSx · #2 (**permalink**) 18/02/2012, 12:01

Bueno, pues yo lo haría de esta forma:

Código HTML:

Ver original<html>
<head>
<title>
</title>
<style type="text/css">
.texto
{
font: Tahoma, Helvetica, Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
color: #b5b5b5;
text-shadow: 0 2px 0px #e9e9e9;
line-height:40px;
float:left;
}
div.imagen
{
height:40px;
width:70px;
border:solid 1px black;
display:inline-block;
}
li {
  list-style:none;
}
 
</style>
 
 
</head>
<body>
<li>
<span class="texto">TEXTO</span>
<div class="imagen"><img src="/image/test.png"/></div>
</li>
 
</body>
</html>

AbimaelAlejandroMT · #3 (**permalink**) 18/02/2012, 12:32

como asi amigo ??

pitufoweb · #4 (**permalink**) 18/02/2012, 12:34

Hola,

mmm, que no seria mas fácil hacerlo con vertical-align: middle; . Digo, creo para eso la inventaron no?

Saludos

xFantaSx · #5 (**permalink**) 18/02/2012, 12:53

Cita:

Iniciado por pitufoweb

Hola,

mmm, que no seria mas fácil hacerlo con vertical-align: middle; . Digo, creo para eso la inventaron no?

Saludos

xD!. en el tiempo que llevo con esto nunca me ha servido esa propiedad

Pero ahora viendo parece que si sirve

pero hay que aplicarla a la imagen?.

pitufoweb · #6 (**permalink**) 18/02/2012, 12:57

Cita:

Iniciado por xFantaSx

pero hay que aplicarla a la imagen?.

Claro...Quieres alinear el texto con la imagen o no?

Saludos

BanNsS1 · #7 (**permalink**) 18/02/2012, 13:20

Yo también utilizo float:left preferiblemente antes que vertical-align ya que siempre que la he utilizado no me va exactamente como a mí me gustaría.

joseoliveras · #8 (**permalink**) 19/02/2012, 09:45

Aqui sería interesante saber si el texto puede crecer hasta tener dos lineas.