[Resolvido] Alinhar imagem com texto

[Oenning 0]

Como fazer para centralizar o texto conforme a imagem?

 

<a href="java script:alert('add');">
<img alt="Add answer" src="add.png" style="border:none"/>
Add answer
</a>

Assim:

I

M

A Texto

G

E

M

 

Hoje fica assim:

I

M

A

G

E

M Texto

[Thomazelli 0]

Deixa o campo de imagem da seguinte maneira:

<img alt="Add answer" src="add.png" style="border:none; float:left;"/>

Mas ainda assim seria muito importante ver o restante do codigo, pois apenas adicionando isso pode ocorrer um problema no css...

 

Abraços...

[Oenning 0]

Na verdade o html só tem aquilo que postei.

Eu queria criar um arquivo html onde o texto fique alinhado com a imagem, depois disso, vou inserir na minha aplicação.

E não funcionou.

O html está assim agora:

 

<a href="java script:alert('add');" style="text-decoration:none;">
<img alt="Add answer" src="add.jpg" style="border:none; float:left;"/>
Add answer
</a>

Aqui tem uma imagem do resultado.

É claro que isso foi apenas um teste, a imagem que eu vou usar não é tão grande, usei essa apenas para ver se o texto ficava centralizado.

http://img408.imageshack.us/img408/6372/testem.jpg

[Daniel D'Angelo 0]

  Oenning disse:

Na verdade o html só tem aquilo que postei.

Eu queria criar um arquivo html onde o texto fique alinhado com a imagem, depois disso, vou inserir na minha aplicação.

E não funcionou.

O html está assim agora:

 

<a href="java script:alert('add');" style="text-decoration:none;">
<img alt="Add answer" src="add.jpg" style="border:none; float:left;"/>
Add answer
</a>

Aqui tem uma imagem do resultado.

É claro que isso foi apenas um teste, a imagem que eu vou usar não é tão grande, usei essa apenas para ver se o texto ficava centralizado.

http://img408.imageshack.us/img408/6372/testem.jpg

Opa Oenning beleza?

 

então o que você queria seria mais ou menos isso?

 

http://www.ddferraz.com.br/Untitled-1.jpg

 

Pois se for seria só inserir um style="float:left" como o nosso amigo disse acima...

 

Abraços

 

Qualquer coisa posta ae

 

Falou

[William Bruno 1501]

Para alinhar o texto, coloca ele dentro de um elemento como um span, e define um lie-height do mesmo valor da altura da imagem.

Alinhamento vertical, é meio complicado em CSS...

[Thomazelli 0]

Suponha que sua imagem tenha 200px de altura. Use seu codigo assim:

<p style="line-height:200px;">
<a href="java script:alert('add');" style="text-decoration:none;">
	 <img alt="Add answer" src="add.jpg" style="border:none; float:left;"/>
	 Add answer
</a>
</p>

Se adicionar o SPAN, ele nao ira assumir a altura, por se tratar de um elemento INLINE.

Talves colocando tudo dentro de um P, definindo sua LINE-HEIGHT ja resolva o problema em todos os navegadores...

 

Abraços

 

#### EDIT ####

 

Acabei de testar o código aqui e funcionou http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Guilherme Rambo 4]

Já tentou colocar vertical-align:middle na imagem? Isso quase sempre resolve nestes casos oO

 

[]'s

[Oenning 0]

  Thomazelli disse:

Suponha que sua imagem tenha 200px de altura. Use seu codigo assim:

<p style="line-height:200px;">
<a href="java script:alert('add');" style="text-decoration:none;">
	 <img alt="Add answer" src="add.jpg" style="border:none; float:left;"/>
	 Add answer
</a>
</p>

Se adicionar o SPAN, ele nao ira assumir a altura, por se tratar de um elemento INLINE.

Talves colocando tudo dentro de um P, definindo sua LINE-HEIGHT ja resolva o problema em todos os navegadores...

 

Abraços

 

#### EDIT ####

 

Acabei de testar o código aqui e funcionou http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Ótimo! funcionou, obrigado!

[Thomazelli 0]

Tranquilo...

 

Abraços... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif