Discussion :

[afrodje]

Bonjour,

J'aimerai aligner un texte et une image dans une cellule.

J'utilise bien style="vertical-align: middle;" mais cela ne s'aligne pas...

Il y un imprime écran.
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mon texte ici <span style="float:right;"><a class="maClass"  href="mailto:test@test.com"><img src="/enveloppe.jpg" style="vertical-align: middle;" border="0" alt=""/></span></a>

Merci

[desert]

Essaie en plaçant ton image avant ton texte :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<a href="mailto:test@test.com">
   <img src="enveloppe.jpg" alt="" />
</a>
<p>mon texte ici</p>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img {
   float: right;
   border: 0;
   ...
}

[GihefBey]

Bonjour,

En replaçant ton code de manière un peu plus lisible, on constate une erreur plus facilement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  <span style="float:right;">
    <a class="maClass"  href="mailto:test@test.com">
      <img src="/enveloppe.jpg" style="vertical-align: middle;" border="0" alt=""/>
    </span>
  </a>

Remets les balises dans l'ordre.
Par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  <span style="float:right;">
    <a class="maClass"  href="mailto:test@test.com">
      <img src="/enveloppe.jpg" style="vertical-align: middle;" alt=""/>
    </a>
  </span>

Ensuite, en simplifiant si possible, applique le style qui aligne sur l'élément qui contient ce que tu veux centrer, le <td> (on suppose que c'est un <td> puisque tu parles de cellule mais que tu n'en donnes pas le code)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td style="vertical-align: middle;">
  mon texte ici 
  <a class="maClass" style="float:right;" href="mailto:test@test.com">
    <img src="/enveloppe.jpg" alt=""/>
  </a>
</td>

-

[afrodje]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<td style="vertical-align: middle;">
  mon texte ici 
  <a class="maClass" style="float:right;" href="mailto:test@test.com">
    <img src="/enveloppe.jpg" alt=""/>
  </a>
</td>

-

J'ai toujours un écart entre le texte et l'image.