Выровнять переключатель с соответствующей меткой

Question

Я использую управление списком переключателей ASP.NET.

Он генерирует следующий 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> 

Все выглядит нормально (по крайней мере, для пользователя), метки выровнены с переключателями.

Однако при изменении размера шрифта 10px размер метки заметно меньше, но побочный эффект заключается в том, что метка также выглядит так, что она выровнена в нижней части переключателя. Мне нужен ярлык, который будет привязан к середине переключателя.

я был в состоянии сделать это в IE со следующим CSS:

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

Однако это не работает в Firefox или Chrome

Любые предложения?

Answer 1

Вместо этого:

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

попробовать это:

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

Answer 2

Этот селектор атрибута не будет работать в IE6 - самый безболезненный метод, который я нашел, чтобы добавить класс " радио»для кнопок радио, поэтому CSS становится:

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

конечно, таблица не правильная разметка для такого рода для m - лично я выступаю за список определений, с метками внутри DT и вводами в DD. Семантически это нормально, на мой взгляд - вы показываете список терминов (этикеток), которые пользователь должен определить (входы).

Разметка будет выглядеть следующим образом:

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