Modification de l'alignement vertical de l'élément de table lors de l'ajout de contrôle à l'intérieur de TD

Question

Je me suis posé la question à ce sujet. Pourquoi l'alignement du td est-il affecté lorsque vous placez des contrôles à l'intérieur?

Par exemple.

<tr> 
    <td>Row 1</td> 
    <td> 
    <input type="text" /> 
    <input type="button" value="Select" /> 
    </td> 
    <td>Selected Value 1</td> 
</tr> 
<tr> 
    <td>Row 2</td> 
    <td colspan="2"> 
    <input type="text" /> 
    <input type="button" value="Select" /> 
    Selected Value 2 
    </td> 
</tr> 

Le "Row 1" Le texte est aligné avec "valeur sélectionnée 1". Toutefois, le texte "Valeur sélectionnée 2" est légèrement en bas et n'est pas centré et n'est pas aligné avec "Ligne 2".

J'ai déjà essayé l'alignement vertical au milieu ou même la valence et cela ne fonctionne pas. Cela arrive à la fois dans IE et Firefox. C'est plus évident dans IE. Je ne comprends vraiment pas ça.

Answer 1

Lorsque j'essayé d'ajouter vertical médian aligné sur l'autre commande à l'intérieur du td, il semble y définir toutes les au milieu. C'est un comportement étrange dans IE mais il a résolu mon problème.

<tr> 
    <td>Row 1</td> 
    <td> 
    <input type="text" /> 
    <input type="button" value="Select" /> 
    </td> 
    <td>Selected Value 1</td> 
</tr> 
<tr> 
    <td>Row 2</td> 
    <td colspan="2"> 
    <input type="text" style="vertical-align: middle;" /> 
    <input type="button" value="Select" style="vertical-align: middle;" /> 
    Selected Value 2 
    </td> 
</tr> 

Answer 2

Les contrôles d'entrée ont différentes hauteurs de ligne du texte standard. Ainsi, lorsque vous placez ces contrôles, nativement en ligne, à côté du texte, ils forcent la ligne de base/ligne à se comporter différemment de ce que le texte se comporterait sans lui. Cela se produit également si vous placez une image à côté du texte sans la faire flotter (le texte s'aligne sur le bas de l'image, jusqu'à ce qu'il se termine sur la ligne suivante).

Vous devriez pouvoir contourner cela en faisant flotter vos contrôles d'entrée vers la gauche, ou éventuellement en changeant le line-height du texte.

Edit: Cela semblait fonctionner très bien pour moi ..

<table> 
    <tr> 
     <td>Row 1</td> 
     <td> 
      <input type="text" /> 
      <input type="button" value="Select" /> 
     </td> 
     <td>Selected Value 1</td> 
    </tr> 
    <tr> 
     <td style="">Row 2</td> 
     <td style="line-height: 120%" colspan="2"> 
      <input type="text" /> 
      <input type="button" value="Select" /> 
      Selected Value 2 
     </td> 
    </tr> 
</table> 

Answer 3

c'est parce que les composants de la 2e rangée sont affichés « en ligne » avec le texte et les hauteurs des composants sont plus grandes que la hauteur de la ligne du texte.

Si vous modifiez les hauteurs de ligne pour toutes les parties de texte à une valeur plus grande, elles s'aligneront toutes.

td {line-height:500%;}