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

Question 1

레이블과 같은 줄에 라디오 단추가있는 양식이 있습니다. 그러나 라디오 버튼은 아래 스크린 샷과 같이 레이블과 수직으로 정렬되지 않습니다.

라디오 버튼.

라디오 버튼을 레이블과 수직으로 정렬하려면 어떻게해야합니까?

편집하다:

다음은 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;
}

Question 2

이 시도:

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

Question 3

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

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

깡깡이

Question 4

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

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

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

Question 5

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/

Question 6

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

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

스 니펫 확장

Question 7

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

input {
    vertical-align:middle;
}

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

데모

Question 8

이런 식으로 작동합니다.

CSS :

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

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