html 라디오 버튼을 레이블에 수직으로 정렬하는 방법은 무엇입니까?

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

---

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

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

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

---

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

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

깡깡이

---

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/

---

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

input {
    vertical-align:middle;
}

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

데모

---

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

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

---

이런 식으로 작동합니다.

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;은 정렬이 가까워 지지만 여전히 몇 픽셀 떨어져 있습니다. 레이블과 라디오 입력 사이에 진정한 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>

---

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

---

While I agree tables shouldn't be used for design layouts contrary to popular belief they do pass validation. i.e. the table tag is not deprecated. The best way to align radio buttons is using the vertical align middle CSS with margins adjusted on the input elements.

---

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

(The -2px margin-top is a matter of taste.)

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

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

---

몇 가지 방법이 있습니다. 내가 선호하는 방법은 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>

참고 URL : https://stackoverflow.com/questions/13509883/how-to-vertically-align-a-html-radio-button-to-its-label