Как вертикально выровнять на нем ярлык html?

У меня есть форма с переключателями, которые находятся на той же линии, что и их метки. Радиокнопки, однако, не выровнены по вертикали со своими метками, как показано на скриншоте ниже.

Как можно вертикально выровнять переключатели со своими метками?

Изменить:

Здесь html-код:

<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio 2</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio 3</label><br/>

И код css:

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
}

Ответы

Ответ 1

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

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

Ответ 2

Я знаю, что выбрал anwer menuka devinda, но, глядя на комментарии ниже, я согласился и попытался найти лучшее решение. Мне удалось придумать это и, на мой взгляд, это гораздо более элегантное решение:

input[type='radio'], label{   
    vertical-align: baseline;
    padding: 10px;
    margin: 10px;
 }

Спасибо всем, кто предложил ответ, ваш ответ не остался незамеченным. Если у вас есть другие идеи, вы можете добавить свой собственный ответ на этот вопрос.

Ответ 3

input {
    display: table-cell;
    vertical-align: middle
}

Поместите класс для всех радиостанций. Это будет работать для всех переключателей на странице html.

Fiddle

Ответ 4

попробуйте добавить vertical-align:top в css

label{
    padding:5px;
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
    margin: 10px;
    vertical-align:top;
}

Тест: http://jsfiddle.net/muthkum/heAWP/

Ответ 5

Вы можете сделать следующее:

input {
    vertical-align:middle;
}

label{
    color:#222;
    font-family:corbel,sans-serif;
    font-size: 14px;
}

~~DEMO~~

Ответ 6

Можно также добавить немного гибкости к ответам.

.Radio {
  display: inline-flex;
  align-items: center;
}

.Radio--large {
  font-size: 2rem;
}

.Radio-Input {
  margin-right: 0.5rem;
}

<div>
  <label class="Radio" for="sex-female">
    <input class="Radio-Input" type="radio" id="sex-female" name="sex" value="female" />
    Female
  </label>

  <label class="Radio" for="sex-male">
    <input class="Radio-Input" type="radio" id="sex-male" name="sex" value="male" />
    Male
  </label>
</div>


<div>
  <label class="Radio Radio--large" for="sex-female2">
    <input class="Radio-Input" type="radio" id="sex-female2" name="sex" value="female" />
    Female
  </label>

  <label class="Radio Radio--large" for="sex-male2">
    <input class="Radio-Input" type="radio" id="sex-male2" name="sex" value="male" />
    Male
  </label>
</div>

Ответ 7

Что-то вроде этого должно работать

CSS

input {
    float: left;
    clear: left;
    width: 50px;
    line-height: 20px;
}

label {
    float: left;
    vertical-align: middle;
}

Ответ 8

label, input {
    vertical-align: middle;
}

Я просто выравниваю вертикальную середину полей с базой исходного поля плюс половину x-height (en.wikipedia.org/wiki/X-height) родителя.

Ответ 9

Многие из этих ответов говорят, что используйте vertical-align: middle;, который закрывает выравнивание, но для меня он все еще выключен на несколько пикселей. Метод, который я использовал, чтобы получить истинное соответствие 1 - 1 между метками и радиовводами, - это vertical-align: top;:

label, label>input{
    font-size: 20px;
    display: inline-block;
    margin: 0;
    line-height: 28px;
    height: 28px;
    vertical-align: top;
}

<h1>How are you?</h1>
<fieldset>
	<legend>Your response:</legend>
	<label for="radChoiceGood">
		<input type="radio" id="radChoiceGood" name="radChoices" value="Good">Good
	</label>
	
	<label for="radChoiceExcellent">
		<input type="radio" id="radChoiceExcellent" name="radChoices" value="Excellent">Excellent
	</label>
	
	<label for="radChoiceOk">
		<input type="radio" id="radChoiceOk" name="radChoices" value="OK">OK
	</label>
</fieldset>

Ответ 10

Добавление display:inline-block к меткам и предоставление им padding-top исправить это, я думаю. Кроме того, просто установка line-height на ярлыках также будет.

Ответ 11

Пока я согласен, таблицы не должны использоваться для макетов дизайна, вопреки распространенному мнению, они проходят проверку. т.е. тег таблицы не устарел. Лучший способ выравнивания радиокнопок - использовать вертикальный выравнивающий средний CSS с полями, скорректированными на входных элементах.

Ответ 12

Мне нравится помещать входные данные в метки (добавленный бонус: теперь вам не нужен атрибут for на ярлыке), и поместите vertical-align: middle на вход.

label > input[type=radio] {
    vertical-align: middle;
    margin-top: -2px;
}

#d2 {  
    font-size: 30px;
}

<div>
	<label><input type="radio" name="radio" value="1">Good</label>
	<label><input type="radio" name="radio" value="2">Excellent</label>
<div>
<br>
<div id="d2">
	<label><input type="radio" name="radio2" value="1">Good</label>
	<label><input type="radio" name="radio2" value="2">Excellent</label>
<div>

Ответ 13

Есть несколько способов, один из которых я предпочел бы использовать таблицу в html. вы можете добавить две таблицы из трех столбцов и поместить переключатели и макет.

<table border="0">

<tr>
  <td><input type="radio" name="sex" value="1"></td>
  <td>radio1</td>

</tr>
<tr>
  <td><input type="radio" name="sex" value="2"></td>
  <td>radio2</td>

</tr>
</table>