Positionnement vertical du texte dans la cellule de tableau

Lorsque je place une image suivie d'un texte dans une cellule de tableau, l'alignement vertical du texte se décale par rapport au texte des cellules adjacentes. J'ai essayé d'utiliser une propriété CSS line-height, mais cela ne semblait pas avoir d'effet.Positionnement vertical du texte dans la cellule de tableau

Dans l'exemple suivant, j'ai besoin que "123 Description" soit aligné sur "cellule un". De plus, il y a un espace entre l'image et "123" par défaut. Comment puis-je ajuster cela - des marges négatives peut-être?

<html> 
<head> 
    <style type="text/css"> 
     table { border-collapse: collapse; } 
     td { border: thin solid; width: 10em;} 
     /* .adjust-text { line-height: 1.3em; } */ 
    </style> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr> 
       <td>cell one</td> 
       <td> 
        <img src="small-star.png" /> 
        <span class="adjust-text">123 Description</span> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Source

2010-06-09 Lightbeard

Est-ce que l'une de ces solutions fonctionnent pour vous Robert? – Andrew

Par défaut, l'image est alignée sur la ligne de base du texte, ce qui pousse le texte de cette cellule vers le bas. Pour résoudre ce problème, spécifiez:

td img { vertical-align: top; }

Il y a un bon résumé des CSS vertical aligner here.

Pour enlever l'espace ... supprimer l'espace:

<img src="http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png" /><span class="adjust-text">123 Description</span>

http://jsfiddle.net/s38Uv/

Source

2010-06-09 17:51:22 Andrew

Note: Cela fonctionne aussi lorsque vous utilisez l'affichage: table-cellule ; sur un div. –

-1

Avez-vous essayé un vertical-align:middle classique? Sinon, placez l'image dans sa propre cellule ou laissez l'alignement par défaut et changez le fond de remplissage de toutes vos cellules vous donnera également la même chose.

Source

2010-06-09 17:51:08 edl

Cela ne fonctionnera pas, regardez comment son exemple rend pour voir de quoi il parle. – Andrew

Euh ouais. Je ne vois aucun lien pour voir comment ça «rend» pour ainsi dire. Où vous avez un chemin complet vers son image, je n'ai aucune idée ... – edl

Il l'avait dans son message d'origine: http://jsfiddle.net/s38Uv/ – Andrew

Pour aligner votre image avec la cellule, essayez de mettre l'image dans une règle css comme une image d'arrière-plan. Réglez ensuite la position y de l'arrière-plan en utilisant la position de fond. Ajoutez un remplissage à gauche de l'élément pour afficher le texte à droite de l'image.


     table { border-collapse: collapse; } 
     td { border: thin solid; width: 10em;} 
     .image { 
      background-image:url('http://juzzam.org:8888/AkoveServer-0.1/images/small-star.png'); 
      background-position: 0 -2px; 
      padding-left:20px; 
     }


<span class="image">123 Description</span>

Source

2010-06-09 17:55:31 Calvin

<html> 
<head> 
<style type="text/css"> 
    table { border-collapse: collapse; } 
    td { border: thin solid; width: 10em;} 
    td { vertical-align: baseline;} 
    td img { vertical-align: middle;} 
</style> 
</head> 
<body> 
<table> 
    <tbody> 
     <tr> 
      <td>cell one</td> 
      <td> 
       <img src="small-star.png" /> 
       <span style="margin: 0 0 0 -5;">123 Description</span> 
      </td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

Source

2010-06-09 18:10:45 Chinjoo

Positionnement vertical du texte dans la cellule de tableau

Répondre

Questions connexes