Позиция текста около checkbox

[warobushek]

Привет всем!

Как можно при следующей верстке сделать текст "по центру" от чекбокса?

<label><input type="checkbox" value="0" name="choice[0]"> Вариант 1</label>

Пробовал прописать

label { padding-bottom: 4px; }

label input { margin-bottom: -2px; }

Сейчас выглядит так:

P.S: Попробовал label input {float: left} — работает. Но не хотелось бы делать лишние плавающие элементы.

Edited July 2, 2011 by warobushek

[Softlink]

а line-height не пробовали? Может подойдет.

[klierik]

идеально одним набором стилей кроссбраузерно и кроссплатформенно сделать не получится.

Но если все положить в лейбел, в него инпут и текст лейбла в спан. Потом инпут и спан сделать инлайн-блоком с выретикальным выравниванием middle может получится вполне адекватно.

И не забудь убить дефолтные стили отступа у чекбокса.

[warobushek]

Получилось с отступами в ИЕ7. Хотя, как видно из скриншота, отсутпы переопределены моими стилями.

Edited July 3, 2011 by warobushek

[amelice]

Получилось с отступами в ИЕ7. Хотя, как видно из скриншота, отсутпы переопределены моими стилями.

а в других браузерах?

я вчера тоже попыталась сделать твой пример. Но, у меня не получилось, хотя так же указала input {vertical-align : middle;}(прочла, что замещаемые элементы по вертикали выравниваются по базовой линии), наверно, нужно было обнулить стили input (как у тебя), как и посоветовал klierik.

Edited July 3, 2011 by cheburek