在TD中添加控件时表项垂直对齐更改 [英] Table item vertical-alignment change when adding control inside TD

问题描述

我一直在想这件事。为什么在将控件放入其中时，td的对齐会受到影响。

例如，

 < tr> 
< td>第1行< / td> 
< td> 
< input type =text/> 
< input type =buttonvalue =Select/> 
< / td> 
< td>选定值1< / td> 
< / tr> 
< tr> 
< td>第2行< / td> 
< td colspan =2> 
< input type =text/> 
< input type =buttonvalue =Select/> 
选定值2 
< / td> 
< / tr> 
  

第1行文本与选中值1 。不过，文本选定的值2 稍微向下，不居中，不与第2行对齐。

我已经尝试了垂直对齐中间甚至valign，它不起作用。它发生在IE和Firefox中。在IE中更明显。当我尝试添加垂直对齐的中间到 td 中的其他控件的中间位置时， / strong>，它似乎把所有的中间。这是一个奇怪的行为，但它确实解决了我的问题。

< td>第1行< / td>
< td>
< input type =text/>
< input type =buttonvalue =Select/>
< / td>
< td>选定值1< / td>
< / tr>
< tr>
< td>第2行< / td>
< td colspan =2>
< input type =textstyle =vertical-align：middle; />
< input type =buttonvalue =Selectstyle =vertical-align：middle; />
选定值2
< / td>
< / tr>

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.

解决方案

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>

这篇关于在TD中添加控件时表项垂直对齐更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！