elemento tabella delle modifiche verticale di allineamento quando si aggiunge il controllo interno TD

Question

Mi sono chiesto su questo. Perché l'allineamento del TD viene colpito quando si posiziona i controlli al suo interno.

Ad esempio.

<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>

Il " Riga 1 " testo è allineato con " valore selezionato 1 ". Tuttavia, il testo " valore selezionato 2 " è un po 'giù e non centrato e non allineata con " Riga 2 ".

Ho già provato allineamento verticale centrale o anche valign e non funziona. Succede sia in IE e Firefox. E 'più evidente in IE. Io davvero non capisco questo.

Answer 1

Quando ho provato ad aggiungere mezzo allineato verticale all'altra controllo all'interno del td , sembra impostare tutte le a metà. Si tratta di un comportamento strano in IE, ma lo ha fatto risolvere il mio problema.

<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

è perché i componenti della seconda fila sono visualizzate "in linea" con il testo e le altezze dei componenti sono più grandi rispetto all'altezza riga del testo.

se sono state modificate le altezze di linea per tutti i pezzi di testo a un valore più grande, si sarebbero tutti in fila.

td  {line-height:500%;}

Answer 3

I controlli di input hanno differenti line-altezze dal testo standard. Quindi, quando si posiziona questi, in modo nativo in linea, controlla accanto al testo costringono la linea di base / lineHeight a comportarsi in modo diverso rispetto al testo sarebbe comportato senza di essa. Ciò avviene anche se si inserisce un'immagine accanto al testo senza galleggiante (il testo si allinea con la parte inferiore dell'immagine, fino alla riga successiva).

Si dovrebbe essere in grado di aggirare questo flottante i controlli di input a sinistra, o, eventualmente cambiando la line-height del testo.

Modifica: Questo sembrava funzionare bene per me ..

<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>