테이블 항목 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

내부의 다른 컨트롤에 수직으로 정렬 된 수직 정렬을 추가하려고 할 때 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>

Answer 2

두 번째 행의 구성 요소가 텍스트와 함께 "인라인"으로 표시되고 구성 요소의 높이가 텍스트의 선 높이보다 크기 때문입니다.

모든 텍스트 조각의 선 높이를 더 큰 값으로 변경하면 모두 정렬됩니다.

td  {line-height:500%;}

Answer 3

입력 컨트롤은 표준 텍스트와 다른 줄 높이가 있습니다. 따라서 기본적으로 인라인을 배치하면 텍스트 옆에 컨트롤을 제어 할 때 기준선/라인 하이이트가 텍스트없이 행동하는 것과 다르게 행동하도록 강요합니다. 이것은 텍스트를 떠 다니지 않고 텍스트 옆에 이미지를 배치하면 발생합니다 (텍스트는 이미지의 맨 아래에 자체적으로 다음 줄로 랩 될 때까지 자체적으로 정렬됩니다).

입력 컨트롤을 왼쪽에 떠나거나 아마도 변경하여이를 우회 할 수 있어야합니다. 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>