Aligner le bouton radio avec l'étiquette correspondante

Question

J'utilise le contrôle de liste de boutons radio ASP.NET.

Il génère le code HTML suivant.

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

Tout semble bien jusqu'ici (au moins pour l'utilisateur), les étiquettes sont alignées avec les boutons radio.

Cependant lorsque je redimensionne la police pour dire 10px, la taille de l'étiquette semble évidemment plus petite, mais l'effet secondaire est que l'étiquette semble également alignée sur le bas d'un bouton radio. J'ai besoin d'une étiquette pour être alligned au milieu d'un bouton radio.

j'ai pu le faire dans IE avec les éléments essentiels suivants:

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

Toutefois, cela ne fonctionne pas dans Firefox ou Chrome

Toutes les suggestions?

Answer 1

Au lieu de cela:

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

essayez ceci:

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

Answer 2

Ce sélecteur d'attribut ne fonctionne pas dans IE6 - la méthode la plus indolore que j'ai trouvé est d'ajouter une classe de ' radio » à vos boutons radio, de sorte que le CSS devient:

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

Bien sûr, une table n'est pas le balisage correct pour ce genre de pour Personnellement, je suis en faveur d'une liste de définitions, avec des étiquettes dans le DT et des entrées dans le DD. D'un point de vue sémantique, c'est OK à mon avis - vous montrez une liste de termes (les étiquettes) que l'utilisateur doit définir (les entrées).

Le balisage ressemblerait à ceci:

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