Colocar imagem ao lado do input

[André Severino 3]

Bom dia pessoal, gostaria de centralizar uma imagem ao lado do input, mas não consigo ela não fica alinhada verticalmente.

 

Abaixo uma print de como está. Gostaria que ela ficasse no meio.

 

 

O código.

 

<label>
  Senha: <input type="password" name="txtSenha1" class="text2" /> 
  <a rel="ajuda" title="Digite sua senha para ter acesso ao sistema.">
     <img src="imagens/ajuda_IN.gif" alt="" />
  </a>
</label>

<label>
  Redigite sua senha: <input type="password" name="txtSenha2" class="text2" /> 
  <a rel="ajuda" title="Redigite a sua senha para verificação.">
     <img src="imagens/ajuda_IN.gif" alt="" />
  </a>
</label>

 

Eu pensei em deixar um background em um span com o tamanho certo, mas antes gostaria de saber se tem como fazer via css a estilização desta imagem :thumbsup:

[Thiago Retondar 18]

Você pode usar margin-top para dar uma distância do topo (ou o tamanho vertical do label é variável)?

 

:thumbsup:

[André Severino 3]

É

Então eu usei um <span></span>, depoi dei um

.formin fieldset label span{position:relative; top:5px; margin-left:2px;}

 

Funcionou no ie6, 7 e 8 :P

 

<label class="linha"><strong>* Redigite sua senha:</strong> <input type="password" name="txtSenha2" class="text2" />
       <a rel="ajuda" title="Re-digite a sua senha para verificação."><span><img src="imagens/ajuda_IN.gif" alt="" /></span></a>
</label>

[Henrique Barcelos 290]

Esse span aí é desnecessário, use a estilização diretamente na tag <a>

[Preis85 0]

Um vertical-align:middle na imagem ja resolveria teu problema.

[André Severino 3]

Tentei o vertical-align e tb não foi

[Thiago Retondar 18]

Vê esse exemplo que eu fiz correndo:

 

 

<style type="text/css">
   #teste {
width: 500px;
height: 300px;
background: #ccc;
border: 1px solid black;
   }

   #teste label {
height: 30px;
line-height: 50px;
   }

   #teste label input {
width: 200px;
height: 50px;
   }

   #teste label img {
vertical-align: middle;
   }
</style>
<div id="teste">
   <form action="" method="post">
<fieldset>
    <label>
	Usuário
	<input type="text" name="user" />
	<img src="http://images4.wikia.nocookie.net/__cb20070913120704/pasargada/images/thumb/c/c2/Interroga%C3%A7%C3%A3o.jpg/33px-Interroga%C3%A7%C3%A3o.jpg" alt="o que isso significa" />
    </label>
</fieldset>
   </form>
</div>

 

Não testei em outros browsers, além do Google Chrome.

 

:thumbsup: