css - ラジオボタンの横にテキストを縦に配置する

Question

これは基本的な CSS の質問です。ラジオボタンの後に小さなテキストラベルが付いています。テキストを垂直方向に中央揃えで表示したいのですが、私の場合、テキストは常にラジオボタンのボタンに揃えられます。

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

Jsfiddle は次のとおりです。

助言がありますか？

ありがとう、

アラン。

score 40 · Accepted Answer

内で使用しlabelます。、など、vertical-alignさまざまな値に設定するために使用します。bottombaselinemiddle

score 19 · Accepted Answer

これはあなたが求めているかもしれないものだと思います

CSS

label{
  font-size:18px;
  vertical-align: middle;
}

input[type="radio"]{
  vertical-align: middle;
}

HTML

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

score 9 · Accepted Answer

これに慣れた

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

score 5 · Accepted Answer

HTML:

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS:

label input[type="radio"] { vertical-align: text-bottom; }

score 3 · Accepted Answer

次のようなものを試すことができます。

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

スパンにマージントップのようなものを与えます。

span{
    margin-top: 4px;
    position:absolute;
}

ここにフィドルがありますhttp://jsfiddle.net/UnA6j/11/

score 2 · Accepted Answer

float:left を使用して、ラジオボタンの左側にテキストを揃える必要があります。

input[type="radio"]{
float:left;
}

より応答性の高い出力を得るために、ラベルも使用できます。

css - ラジオ ボタンの横にテキストを縦に配置する