Alinear el botón de opción con la etiqueta correspondiente

Question

Estoy usando el control de lista de botones de ASP.NET.

Genera el siguiente 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> 

Todo se ve bien hasta ahora (al menos para el usuario), las etiquetas se alinean con los botones de radio.

Sin embargo, cuando cambio el tamaño de la fuente para decir 10px, el tamaño de la etiqueta obviamente parece más pequeño, pero el efecto secundario es que la etiqueta también parece estar alineada con la parte inferior de un botón de opción. Necesito una etiqueta para alinearme a la mitad de un botón de opción.

que era capaz de hacer esto en IE con el siguiente CSS:

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

Sin embargo, esto no funciona en Firefox o Chrome

¿Alguna sugerencia?

Answer 1

lugar de esto:

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

intente esto:

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

Answer 2

Eso selector de atributos no funcionará en IE6 - el método más doloroso que he encontrado es añadir una clase de ' Radio' a los botones de radio, por lo que la convierte en CSS:

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

por supuesto, una mesa no es el marcado correcto para ese tipo de de m - personalmente estoy a favor de una lista de definición, con etiquetas dentro del DT y entradas en el DD. Semánticamente, esto está bien, en mi opinión, estás mostrando una lista de términos (las etiquetas) que el usuario debe definir (las entradas).

El margen de beneficio se vería así:

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