title: Table item vertical-alignment change when adding control inside TD
body: <p>I have been wondering about this. Why does the alignment of the td gets affected when placing controls inside it.</p>
  
  <p>For example. </p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;Row 1&lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" /&gt;
      &lt;input type="button" value="Select" /&gt;
    &lt;/td&gt;
    &lt;td&gt;Selected Value 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Row 2&lt;/td&gt;
    &lt;td colspan="2"&gt;
      &lt;input type="text" /&gt;
      &lt;input type="button" value="Select" /&gt;
      Selected Value 2
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The "<strong>Row 1</strong>" text is aligned with "<strong>Selected Value 1</strong>". However, the text "<strong>Selected Value 2</strong>" is slightly down and not centered and not aligned with "<strong>Row 2</strong>".</p>
  
  <p>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.</p>