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

StackOverflow https://stackoverflow.com/questions/447539

  •  22-07-2019
  •  | 
  •  

Question 

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

Voici à quoi cela ressemble:


(source: garethjmsaunders.co.uk )
 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 deux 16 pixels mais la cellule en mange quand même 19. Comment les aligner pour enregistrer ces 3 pixels?

Était-ce utile?

La solution

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

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

Autres conseils

L'image s'aligne sur la ligne de base du texte. Cela 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 de remplissage à gauche de 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 */
}

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

D’autres réponses stipulent que l’image ne doit pas faire partie du contenu, mais uniquement pour 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 l'ignorer 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 <=> pour voir ce qui vous convient le mieux.

Quel est le problème pour en faire une image d'arrière-plan? 

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

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

Essayez ceci: 

<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. */

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>

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 <=> séparées, mais c'est un peu un non-non.

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 / le libellé vers le haut et le bas.
  • Jouez avec l'attribut padding pour modifier l'espace horizontal entre l'icône et le texte / libellé.
  • Vous devriez le vérifier sur tous les navigateurs qui vous préoccupent, car ils peuvent afficher de légères différences.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top