Изменение вертикального выравнивания элемента таблицы при добавлении элемента управления в TD - PullRequest
Новая
       15

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

1 голос
/ 21 декабря 2009

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

Например. 

<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. Я действительно не понимаю этого.

Ответы [ 3 ]

1 голос
/ 21 декабря 2009

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

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

td  {line-height:500%;}
1 голос
/ 21 декабря 2009

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

Вы можете обойти это, переместив элементы управления вводом влево или, возможно, изменив 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>
0 голосов
/ 24 декабря 2009

Когда я попытался добавить вертикально выровненную середину к другому элементу управления внутри td , он, кажется, установил все в середине. Это странное поведение в 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>
...