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

Я использую элемент управления списком кнопок 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

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

ОТВЕТЫ

Ответ 1

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

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

попробуйте следующее:

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

Ответ 2

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

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

Конечно, таблица не является правильной разметкой для этой формы - лично я предпочитаю список определений, с метками внутри 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>