Изменение выравнивания элемента таблицы по вертикали при добавлении элемента управления внутри TD

Question

Я давно задавался этим вопросом.Почему выравнивание td изменяется при размещении элементов управления внутри него?

Например.

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

Тот самый "Строка 1" текст выровнен по "Выбранное значение 1".Однако текст "Выбранное значение 2" слегка опущен , не центрирован и не выровнен с "Строка 2".

Я уже пробовал выравнивать по вертикали посередине или даже valign, но это не работает.Это происходит как в IE, так и в Firefox.Это более очевидно в IE.Я действительно этого не понимаю.

Answer 1

Когда я попытался добавить выровненную по вертикали середину к другому элементу управления внутри тд, это, кажется, устанавливает все в середине.Это странное поведение в IE, но оно решило мою проблему.

<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

это потому, что компоненты во 2-й строке отображаются "в ряд" с текстом, а высота компонентов больше высоты строки текста.

если бы вы изменили высоту строк для всех фрагментов текста на большее значение, все они выровнялись бы.

td  {line-height:500%;}

Answer 3

Элементы управления вводом имеют высоту строки, отличную от стандартного текста.Поэтому, когда вы размещаете эти изначально встроенные элементы управления рядом с текстом, они заставляют baseline / lineheight вести себя иначе, чем текст вел бы себя без него.Это также происходит, если вы размещаете изображение рядом с текстом, не перемещая его (текст выравнивается по нижней части изображения, пока не перейдет на следующую строку).

Вы должны быть в состоянии обойти это, переместив элементы управления вводом влево или, возможно, изменив line-height из текста.

Редактировать:Казалось, у меня это отлично сработало..

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