Wie kann ein HTML-Optionsfeld vertikal an seiner Beschriftung ausgerichtet werden?

Ich habe ein Formular mit Optionsfeldern, die sich in derselben Zeile wie ihre Beschriftungen befinden. Die Optionsfelder sind jedoch nicht vertikal mit 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;
}

Versuche dies:

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

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

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 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 diese Frage gerne selbst beantworten.

Versuchen Sie, vertical-align:topin die CSS hinzuzufügen

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

Test: http://jsfiddle.net/muthkum/heAWP/

Könnte auch ein bisschen Flexibilität zu den Antworten 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>

Sie können dies tun:

input {
    vertical-align:middle;
}

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

DEMO

So etwas sollte funktionieren

CSS:

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

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

label, input {
    vertical-align: middle;
}

Ich richte nur den vertikalen Mittelpunkt der Felder an der Grundlinie des übergeordneten Felds plus der halben x-Höhe (en.wikipedia.org/wiki/X-height) des übergeordneten Felds aus.

Viele dieser Antworten sagen zu verwenden vertical-align: middle;, was die Ausrichtung nahe bringt, aber für mich ist es immer noch um ein paar Pixel versetzt. Die Methode, mit der ich eine echte 1: 1-Ausrichtung zwischen den Etiketten und den Funkeingängen erhalten habe, ist folgende 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>

Ich mag es, die Eingaben in die Beschriftungen einzufügen (zusätzlicher Bonus: Jetzt brauchen Sie das forAttribut nicht mehr auf der Beschriftung) und vertical-align: middledie Eingaben zu setzen.

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 wirklich mag, ist die Verwendung einer Tabelle. (Halten Sie Ihre Pitchgabeln! Es ist wirklich schön!) Es bedeutet, dass Sie das forAttribut allen Ihren Beschriftungen und ids Ihren Eingaben hinzufügen müssen . Ich habe diese Option für Beschriftungen 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>

Ich stimme zwar zu, dass Tabellen nicht für Design-Layouts verwendet werden sollten, obwohl sie allgemein angenommen werden, dass sie die Validierung bestehen. dh das Tabellen-Tag ist nicht veraltet. Die beste Möglichkeit zum Ausrichten von Optionsfeldern ist die vertikale Ausrichtung des mittleren CSS mit an den Eingabeelementen angepassten Rändern.

Das Hinzufügen display:inline-blockzu den Etiketten und das Geben von Etiketten padding-topwürde dies beheben, denke ich. Auch nur das Setzen line-heightauf den Etiketten würde auch.

Es gibt mehrere Möglichkeiten, eine, die ich bevorzugen würde, ist die Verwendung einer Tabelle in HTML. Sie können eine Tabelle mit zwei Spalten und drei Zeilen hinzufügen und die Optionsfelder und das Etikett platzieren.

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