Wyrównaj przycisk radiowy z odpowiednią etykietą

Question

Używam sterowania listą przycisków programu ASP.NET.

Generuje następujący kod HTML.

 <table> 
      <tr> 
       <td> 
        <input type="radio"/> 
        <label > 
         label 1</label> 
       </td> 
       <td> 
        <input type="radio" 
         value="False" checked="checked" /> 
        <label > 
         label 2</label></td>     
      </tr> 
     </table> 

Wszystko wygląda dobrze (przynajmniej dla użytkownika), etykiety są wyrównane z przyciskami radiowymi.

Jednak po zmianie rozmiaru czcionki na 10px rozmiar etykiety oczywiście wygląda na mniejszy, ale efektem ubocznym jest to, że etykieta wygląda tak, jakby była wyrównana do dolnej części przycisku opcji. Potrzebuję etykiety, która ma być ustawiona na środku przycisku radiowego.

udało mi się zrobić to w IE z następującym CSS:

<style type="text/css"> 
    label 
    { 
     font-size:10px; 
     line-height:12px; 
     vertical-align:middle; 
    } 
</style> 

Jednak to nie działa w Firefox lub Chrome

Wszelkie sugestie?

Answer 1

Zamiast tego:

label { 
    font-size: 10px; 
    line-height: 12px; 
    vertical-align: middle; 
} 

spróbuj tego:

label, input[type="radio"] { 
    font-size: 10px; 
    vertical-align: middle; 
} 

Answer 2

To selektor atrybutu nie działa w IE6 - najbardziej bezbolesny sposób znalazłem to, aby dodać klasę " radio "do przycisków radiowych, więc CSS staje się:

label, input.radio{ 
    font-size:10px; 
    vertical-align:middle; 
} 

Oczywiście tabela nie jest poprawnym znacznikiem dla tego rodzaju m - osobiście preferuję listę definicji, z etykietami wewnątrz DT i danymi wejściowymi w DD. Semantycznie jest to moim zdaniem w porządku - wyświetlasz listę terminów (etykiet), które użytkownik musi zdefiniować (dane wejściowe).

Znaczniki będzie wyglądać następująco:

<dl class="formStructure"> 
    <dt class="radio"><label for="option1">Yes</label></dt> 
    <dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd> 

    <dt class="radio"><label for="option2">No</label></dt> 
    <dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd> 
</dl>