Aligner verticalement une image puis un texte dans une cellule

Aligner verticalement une image puis un texte dans une cellule - HTML/CSS - Programmation

Marsh Posté le 27-01-2004 à 12:14:21    

Bon, c'est bateau comme question, mais c'est pas du tout ma spécialité l'HTML, désolé.
Voici le source que je génère actuellement :


      <td class="TabTitre" valign="middle" align="center">
          <img src="MonImage.gif">
          <a href="monLien.html"class="lien">MonLibelle</a>&nbsp;
      </td>


 
Et là, dans la cellule du tableau, j'ai mon image, centrée dans la cellule, nickel. Mais le texte de mon lien vient se caler en bas de l'image à côté de laquelle il est placé. C'est là que ça m'va pas :-' . J'ai essayé d'encapsuler les 2 éléments (image et lien) dans un div, c'est pareil.  
Quelqu'un peut m'aider ?


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 27-01-2004 à 12:14:21   

Reply

Marsh Posté le 27-01-2004 à 13:09:07    

Tu veux arriver à quoi comme résultat final ?

Reply

Marsh Posté le 27-01-2004 à 13:28:35    

ajoute simplement un style dans ton image avec un vertical-align: center

Reply

Marsh Posté le 27-01-2004 à 13:58:59    

fastclemmy a écrit :

Tu veux arriver à quoi comme résultat final ?


 
Ha ben oui, j'ai oublié d'expliquer ce que j'voulais :D
Je cherche a ce que l'image ET le texte soient centrés par rapport à la cellule. Donc, a ce que le texte (environ 2 fois moins haut que l'image) soit centré aussi (horizontalement) par rapport a cette image, et non aligné avec le bas de cette image.
On va essayer des schéma.
 
Voila ce que j'ai actuellement:


+-----------------------+
|                       |
|  +---+                |
|  | I |                |
|  +---+ Mon texte      |
|                       |
+-----------------------+


Et je voudrais :


+-----------------------+
|                       |
|  +---+                |
|  | I | Mon texte      |
|  +---+                |
|                       |
+-----------------------+


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 27-01-2004 à 14:19:24    

gizmo a écrit :

ajoute simplement un style dans ton image avec un vertical-align: center


 
Du coup, par rapport a ce que je viens d'écrire, je doute que ta proposition donne ce que je recherche...


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 27-01-2004 à 14:58:34    

et pourtant...

Reply

Marsh Posté le 27-01-2004 à 15:07:32    

gizmo a écrit :

et pourtant...


 
Ben, non. [:sisicaivrai]  
Ou alors je fais mal quelque chose.
 
Voila mon code en suivant ton conseil :


      <td class="TabTitre" valign="middle" align="center">
         <img style="vertical-align: center" src="MonImage.gif">
         <a href="monLien.html" class="lien">MonLibelle</a>&nbsp;
     </td>  


 
...qui donne toujours la même chose!


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 27-01-2004 à 15:26:28    

c'est ma faute, c'est middle la valeur, pas center...

Reply

Marsh Posté le 27-01-2004 à 15:33:11    

gizmo a écrit :

c'est ma faute, c'est middle la valeur, pas center...


 
Ouaiiiis, merci beaucoup.
ça m'a paru bisare 30 secondes que ce soit "center", et pas "middle", mais j'avais tellement confiance en toi que ça m'est même pas venu à l'idée que t'avais pu te planter. C'est con ! [:iznogoud_23]  
 
Par contre je comprend pas trop la logique de la chose : je centre mon image et ça centre le texte qui suit !??


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Marsh Posté le 27-01-2004 à 15:49:49    

une image est considérée comme un caractère, et donc, tu as le bas de l'image ui correspond à la baseline du texte. En forçant sa propriété verticale dans le flux du texte, tu lui indiques que son centre doit se trouver au niveau de la baseline du flux de texte.

Reply

Marsh Posté le 27-01-2004 à 15:49:49   

Reply

Marsh Posté le 28-01-2004 à 09:04:11    

ok. Merci beaucoup.


---------------
Les Vers Solitaires, on aime ... ou pas !
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed