Wie richte ich ein HTML-Radio-Button vertikal an seinem Label aus?

Question 1

Ich habe ein Formular mit Optionsfeldern, die sich in derselben Zeile wie ihre Beschriftungen befinden. Die Optionsfelder sind jedoch nicht vertikal an ihren Beschriftungen ausgerichtet, wie im folgenden Screenshot gezeigt.

Wie kann ich die Optionsfelder vertikal an ihren Beschriftungen ausrichten?

Bearbeiten:

Hier ist der HTML-Code:

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

Und der CSS-Code:

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

Question 2

Versuche dies:

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

Question 3

Ich weiß, dass ich die Antwort von menuka devinda ausgewählt hatte, aber als ich mir die Kommentare darunter ansah, stimmte ich zu und versuchte, eine bessere Lösung zu finden. Ich habe es geschafft, darauf zu kommen und meiner Meinung nach ist es eine viel elegantere Lösung:

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

Vielen Dank an alle, die eine Antwort angeboten haben, Ihre Antwort blieb nicht unbemerkt. Wenn Sie noch weitere Ideen haben, können Sie dieser Frage gerne Ihre eigene Antwort hinzufügen.

Question 4

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

Setzen Sie Klasse für alle Radio. Dies funktioniert für alle Optionsfelder auf der HTML-Seite.

Geige

Question 5

Könnte den Antworten auch ein bisschen Flex hinzufügen.

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

versuchen Sie es hinzuzufügen vertical-align:top ins CSS

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

Prüfen: http://jsfiddle.net/muthkum/heAWP/

Question 7

Sie können folgendermaßen vorgehen:

input {
    vertical-align:middle;
}

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

Question 8

Ich füge die Eingaben gerne in die Etiketten ein (zusätzlicher Bonus: Jetzt brauchen Sie die for Attribut auf dem Etikett) und setzen vertical-align: middle am Eingang.

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>

(Das -2px margin-top ist geschmackssache.)

Eine andere Option, die ich sehr mag, ist die Verwendung einer Tabelle. (Halten Sie Ihre Pitch Forks! Es ist wirklich schön!) Es bedeutet, dass Sie die hinzufügen müssen for Attribut für alle Ihre Labels und ids zu Ihren Eingaben. Ich habe diese Option für Labels mit langem Textinhalt über mehrere Zeilen empfohlen.

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