Allineare il pulsante di opzione con l'etichetta corrispondente

Question

Utilizzo il controllo elenco di pulsanti di opzione ASP.NET.

Genera il seguente codice 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> 

Tutto sembra bene finora (almeno per l'utente), le etichette sono allineate con pulsanti di opzione.

Tuttavia, quando ridimensiono il carattere per dire 10px, la dimensione dell'etichetta sembra ovviamente più piccola, ma l'effetto collaterale di ciò è che l'etichetta sembra anch'essa allineata alla parte inferiore di un pulsante di opzione. Ho bisogno di un'etichetta per essere allineata a metà di un pulsante di opzione.

sono stato in grado di fare questo in IE con il seguente CSS:

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

Tuttavia, questo non funziona in Firefox o Chrome

Qualche suggerimento?

Answer 1

Invece di questo:

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

provare questo:

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

Answer 2

Questo selettore di attributo non funziona in IE6 - il metodo più doloroso che ho trovato è quello di aggiungere una classe di ' Radio' ai tuoi pulsanti di opzione, in modo che il CSS diventa:

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

Naturalmente, un tavolo non è il markup corretto per quel tipo di per m - Personalmente preferisco una lista di definizioni, con etichette all'interno del DT e input nel DD. Semanticamente questo è OK secondo me - stai mostrando un elenco di termini (le etichette) che l'utente deve definire (gli input).

Il markup sarebbe simile a questa:

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