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

이 시도:

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

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

모든 라디오에 수업을 넣으십시오. 이것은 html 페이지의 모든 라디오 버튼에서 작동합니다.

깡깡이

나는 menuka devinda에 의해 anwer를 선택했지만 그 아래의 주석을 보면서 동의하고 더 나은 해결책을 찾으려고 노력했습니다. 나는 이것을 생각해 냈고 제 생각에는 훨씬 더 우아한 해결책입니다.

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

답변 해주신 모든 분들 덕분에 당신의 답변은 눈에 띄지 않았습니다. 여전히 다른 아이디어가 있다면이 질문에 대한 답을 자유롭게 추가하십시오.

vertical-align:topCSS에 추가해보세요

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

테스트 : http://jsfiddle.net/muthkum/heAWP/

답변에 약간의 유연성을 추가 할 수도 있습니다.

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

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

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

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

다음과 같이 할 수 있습니다.

input {
    vertical-align:middle;
}

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

데모

이런 식으로 작동합니다.

CSS :

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

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

label, input {
    vertical-align: middle;
}

상자의 세로 중간 점을 부모 상자의 기준선과 부모의 x- 높이 (en.wikipedia.org/wiki/X-height)의 절반에 맞추기 만하면됩니다.

이 답변 중 많은 부분이을 사용 vertical-align: middle;하여 정렬이 가까워 지지만 저에게는 여전히 몇 픽셀 차이가 있습니다. 레이블과 라디오 입력 사이에 진정한 일대일 정렬을 얻기 위해 사용한 방법은 다음과 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>

나는 라벨 안에 입력을 넣고 (추가 보너스 : 이제 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>

( -2px margin-top맛의 문제입니다.)

제가 정말 좋아하는 또 다른 옵션은 테이블을 사용하는 것입니다. (피치 포크를 잡으세요! 정말 멋지네요!)for 모든 라벨에 속성을id 입력에 입니다. 여러 줄에 걸쳐 긴 텍스트 내용이있는 레이블에이 옵션을 사용하는 것이 좋습니다.

<table><tr><td>
    <input id="radioOption" name="radioOption" type="radio" />
    </td><td>
    <label for="radioOption">                     
        Really good option
    </label>
</td></tr></table>

나는 테이블이 일반적인 믿음과는 반대로 디자인 레이아웃에 사용되어서는 안된다는 데 동의하지만 유효성 검사를 통과합니다. 즉, 테이블 태그는 더 이상 사용되지 않습니다. 라디오 버튼을 정렬하는 가장 좋은 방법은 입력 요소에서 조정 된 여백이있는 세로 정렬 중간 CSS를 사용하는 것입니다.

display:inline-block레이블을 추가 하고 제공하면 padding-top이 문제가 해결 될 것입니다. 또한 line-height라벨에을 설정하는 것도 가능합니다.

몇 가지 방법이 있습니다. 내가 선호하는 방법은 html로 된 테이블을 사용하는 것입니다. 두 개의 coloum 3 행 테이블을 추가하고 라디오 버튼과 레이블을 배치 할 수 있습니다.

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