Table item vertical-alignment change when adding control inside TD

Question

I have been wondering about this. Why does the alignment of the td gets affected when placing controls inside it.

For example.

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

The "Row 1" text is aligned with "Selected Value 1". However, the text "Selected Value 2" is slightly down and not centered and not aligned with "Row 2".

I already tried vertical align middle or even valign and it does not work. It happens in both IE and Firefox. It is more obvious in IE. I really do not get this.

Answer 1

The input controls have different line-heights from the standard text. So when you place these, natively inline, controls next to text they force the baseline/lineheight to behave differently than the text would behave without it. This also happens if you place an image next to text without floating it (the text aligns itself with the bottom of the image, until it wraps to the next line).

You should be able to circumvent this by floating your input controls to the left, or possibly by changing the line-height of the text.

Edit: This seemed to work fine for 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>

Answer 2

it's because the components in the 2nd row are being displayed "inline" with the text and the heights of the components are larger than the line height of the text.

if you changed the line heights for all the pieces of text to a larger value, they would all line up.

td  {line-height:500%;}

Answer 3

When I tried adding vertical aligned middle to the other control inside the td, it seems to set all of the at the middle. It is a weird behavior in IE but it did fix my problem.

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