web-dev-qa-db-fra.com

Comment aligner l'image et le texte verticalement dans TD élément?

<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

C'est à ça que ça ressemble:

http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif Mon flux

L'icône et le texte sont mal alignés verticalement. L'icône est en haut de la cellule du tableau, le texte est en bas. Le texte et l'icône occupent tous les deux 16 pixels, mais la cellule en mange quand même 19. Comment les aligner pour enregistrer ces 3 pixels?

htmlalignmenthtml-table
15
Mr. Lame

Eh bien, si vous choisissez la méthode d’image d’arrière-plan, alors c’est très simple:

background: url(feed.png) left center no-repeat
18
Joey

L’image s’aligne sur la ligne de base du texte; elle n’inclut pas la hauteur du descendant qui correspond au «tick» de la lettre, comme g ou y.

Si la hauteur de la ligne/cellule doit être fixée, vous pouvez ajouter line-height pour la centrer verticalement. Ainsi, par exemple, en supposant que votre cellule mesure 16 pixels de haut:

td.feed {
    line-height:16px;
}

L’autre option serait d’ajouter l’icône en tant qu’image d’arrière-plan, en ajoutant une marge à gauche dans la cellule:

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

La seconde signifierait que vous pourriez supprimer le besoin de tables, maintenant il y a une idée ...

9
roryf

D'autres réponses indiquant que l'image ne devrait pas faire partie du contenu et est simplement destiné à la décoration, ce qui est discutable. Je pense que vous devriez ajouter un attribut alt vide à votre image pour que les lecteurs d'écran puissent ignorer l'image si vous choisissez de conserver votre méthode actuelle.

La propriété vertical-align est celle que vous devez utiliser ici, mais vous voulez utiliser text-bottom. Je vais aussi supposer que vous voulez que ce soit un lien, alors voici un exemple de code complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>garethjmsaunders.co.uk</title>
    <style type="text/css">
    a { text-decoration: none; }
    a img { border: 0; vertical-align: text-bottom; }
    </style>
  </head>
<body>
<table>
<tr>
<td>
  <a href="" title="garethjmsaunders.co.uk rss feed">
    <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
    My feed
  </a>
</td>
</tr>
</table>
</body>
</html>

Si cela n'est toujours pas souhaitable, vous pouvez expérimenter avec line-height et d'autres valeurs pour vertical-align pour voir ce qui vous convient le mieux.

6
cowgod

Quel est le problème avec en faire une image de fond?

.feed {
  background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  padding-left: 16px;
}
2
Ms2ger

essayez simplement "vertical-align: middle" sur la balise IMG, après que vous puissiez également définir le remplissage pour TD

1
Joey

Essaye ça:

<td>
   <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
   <span class="feedTxt">My feed</span>
 </td>

 .feedTxt { line-height: 20px; } /* Or whatever the height of the image is.  Adjust as needed. */
1
Bryan A

Vous pouvez faire position: relative; top: 3px; sur la balise <img>. Vous pouvez également essayer vertical-align: middle; sur la balise <td>, mais je ne pense pas que cela fonctionnera correctement, car je suis à peu près sûr d'avoir déjà rencontré ce problème. Vous pouvez également les mettre dans des balises <td> séparées, mais c'est en quelque sorte un non-non.

0
Paolo Bergantino

Je mettrais les deux éléments (image et texte) dans leurs propres cellules de tableau distinctes. Vous pouvez imbriquer une autre table. C'est un bon endroit pour commencer. Ensuite, vous pouvez jouer avec le rembourrage, etc. pour ajuster.

<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
0
alex

J'ai essayé la méthode de l'image de fond mais je ne l'aimais pas autant que ça ...

Dans le CSS ...

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

Dans la page ...

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • Jouez avec l'attribut "top" pour déplacer le texte/libellé de haut en bas.
  • Jouez avec l'attribut padding pour modifier l'espace horizontal entre l'icône et le texte/libellé.
  • Vous devriez le vérifier dans tous les navigateurs qui vous préoccupent, car ils peuvent afficher de légères différences.
0
sugardaddy