Вертикальное выравнивание текста рядом с переключателем

Это основной вопрос CSS, после этого у меня есть переключатель с небольшой текстовой меткой. Я хочу, чтобы текст выглядел по центру вертикально, но текст всегда выравнивается с кнопкой переключателя в моем случае.

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

Вот Jsfiddle:

http://jsfiddle.net/UnA6j/

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

Спасибо,

Алан.

Ответ 1

Используйте его внутри label. Используйте vertical-align, чтобы установить его в различные значения - bottom, baseline, middle и т.д.

http://jsfiddle.net/UnA6j/5/

Ответ 2

Я думаю, это то, о чем вы могли бы просить

http://jsbin.com/ixowuw/2/

CSS

label{
  font-size:18px;
  vertical-align: middle;
}

input[type="radio"]{
  vertical-align: middle;
}

HTML

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

Ответ 3

Используется для этого

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

Демо

Ответ 4

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

input[type="radio"]{
float:left;
}

Вы также можете использовать метку для более гибкого вывода.

Ответ 5

HTML:

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS

label input[type="radio"] { vertical-align: text-bottom; }

Ответ 6

Вы можете попробовать что-то вроде:

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

и присвойте span margin top like;

span{
    margin-top: 4px;
    position:absolute;
}

вот скрипка http://jsfiddle.net/UnA6j/11/

Ответ 7

простое и короткое решение добавить ниже стиль:

style="vertical-align: text-bottom;"

Ответ 8

Это даст мертвое выравнивание

input[type="radio"] {
  margin-top: 1px;
  vertical-align: top;
}

Ответ 9

Вы также можете попробовать что-то вроде этого:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

  <label  class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>

Ответ 10

input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}