HTML - 라디오 버튼과 텍스트 정렬

Question

두 개의 간단한 표 셀이 서로 나란히 있다고 가정 해보십시오.
하나는 라디오 버튼과 텍스트를 포함합니다. 다른 하나는 텍스트 만 포함합니다.

라디오 버튼의 크기는 16x16 픽셀로 설정됩니다 (왜 그런지 묻지 마십시오.).
글꼴 크기는 12 픽셀입니다.

라벨 및 라디오 버튼을 모두 주요 브라우저에서 일관되게 정렬하려면 (또는 합리적으로 가까운 위치에) 테이블 행의 가운데를 정렬하십시오.

샘플 HTML은 당신이 시작하는 데 : IE, 오페라, 파이어 폭스와 크롬의 내 설치된 버전의

<style type="text/css"> 
td { 
    font-size: 12px; 
    font-family: Verdana; 
} 

.radio { 
    width: 16px; 
    height: 16px; 
    vertical-align: middle; 
    margin: 0px; 
} 

.blah { 
    text-decoration: line-through; 
} 
</style> 

<table> 
    <tr> 
    <td> 
     <input type="radio" class="radio" /> 
     <span class="blah">O</span> 
    </td> 
    <td> 
     <span class="blah">O</span> 
    </td> 
    </tr> 
</table> 

을, 위에서 언급 한 this

내가 볼 것으로 예상하고있어, 결과처럼 렌더링 그 이미지에 표시되는 것은 ... ... IE? 진심으로?

나머지는 충분히 가깝지만, 텍스트를 일렬로 표시하려는 시도는 4 브라우저 중 2 개 이상에서 항상 끔찍하게 보입니다. 이러한 목표를 달성하기 위해

Answer 1

"수직 정렬 : 중간"유용 가빈 Kistner 의해 this short explanation 알았다. 크롬, IE, 파이어 폭스, 오페라 및 사파리에서 렌더링되는 것으로 보이는 페이지에 대한 최종 제안을 시도했습니다.

내가 한 일은 td{ line-height:1.5em }입니다. 자세한 내용은 링크를 참조하십시오.

Answer 2

한 가지 방법은

<table> 
    <tr> 
    <td> 
     <table><tr><td><input type="radio" class="radio" /></td> 
     <td><span class="blah">O</span></td></tr></table> 
    </td> 
    <td> 
     <span class="blah">O</span> 
    </td> 
    </tr> 
</table> 

Answer 3

빠른 촬영을하여 두 개의 셀의 첫 번째에 중첩 테이블을 추가하고 (중첩 테이블 내에서) 두 개의 셀에있는 라디오 버튼을 먼저 범위를 넣어하는 것입니다 어둠 속에서 :

• 라디오 입력 요소에 자체 테이블 셀을 지정 하시겠습니까? 그러면 적어도 텍스트는 서로 일치해야합니다.
• .radio 대신 vertical-align:middle; ~ td을 입력 하시겠습니까? 라디오 입력 요소와 셀에있는 텍스트의 기준선이 여전히 입력 요소에 의해 결정 될 수 있기 때문에 여전히

Answer 4

<td> 
    <input type="radio" class="radio" /> 
</td> 
<td> 
    <span class="blah">O</span> <!-- text --> 
</td> 
<td> 
    <span class="blah">O</span> <!-- text2 --> 
</td> 

가 왜 자신의 텍스트를 넣어하지 않습니다 ... 문제를 일으킬 수 있음 기둥.

Answer 5

빠른 수정은 td의 font-size:12px;과 라디오의 width:16px;height:16px;을 동일하게 만드는 것입니다.

예시 2 :

td { 
    font-size: 12px; 
} 
input[type=radio] { 
    width: 12px; /* resize radio */ 
    height: 12px; 
} 

및 인터넷 검색

td { 
    font-size: 16px; /* resize font-size */ 
} 
input[type=radio] { 
    width: 16px; 
    height: 16px; 
}