web-dev-qa-db-ja.com

HTMLラジオボタンをラベルに垂直に配置するにはどうすればよいですか？

ラベルと同じ行にあるラジオボタンのあるフォームがあります。ただし、下のスクリーンショットに示すように、ラジオボタンはラベルと垂直に整列していません。

The radio buttons.

ラジオボタンをラベルと垂直に並べるにはどうすればよいですか？

編集：

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;
}
htmlcssformsxhtmlradio-button
81
ninjacoder

これを試して：

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

Menuka devindaでanwerを選択したことは知っていますが、その下のコメントを見て同意し、より良い解決策を考え出そうとしました。私はこれを思いついたが、私の意見では、はるかにエレガントなソリューションです。

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

答えを提供してくれたみんなのおかげで、あなたの答えは見過ごされませんでした。それでも他のアイデアがあれば、この質問にあなた自身の答えを追加してください。

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

すべてのラジオのクラスを置きます。これは、htmlページのすべてのラジオボタンで機能します。

フィドル

11
vusan

vertical-align:topをcssに追加してみてください

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

テスト： http://jsfiddle.net/muthkum/heAWP/

9
Muthu Kumaran

あなたはこのようにすることができます：

input {
    vertical-align:middle;
}

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

DEMO

7
Shailender Arora

回答に少しフレックスを追加することもできます。

.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>
6
Dominic
label, input {
    vertical-align: middle;
}

ボックスの垂直方向の中点を、親ボックスのベースラインと親のx-heightの半分（en.wikipedia.org/wiki/X-height）に合わせます。

1
Pavel Blagodov

このような何かが動作するはずです

CSS：

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

label {
    float: left;
    vertical-align: middle;
}
1
Damien Overeem

これらの回答の多くは、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>
1
JHS

display:inline-blockをラベルに追加してpadding-topを与えると、これが修正されると思います。また、ラベルにline-heightを設定するだけでも同様です。

0
Anriëtte Myburgh

入力をラベル内に入れるのが好きで（ボーナスを追加：ラベルに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>

（-2px margin-topは好みの問題です。）

私が本当に好きな別のオプションは、テーブルを使用することです。 （ピッチフォークを保持します。本当に素晴らしい！）すべてのラベルにfor属性を追加し、入力にidsを追加する必要があることを意味します。複数行にわたる長いテキストコンテンツのラベルには、このオプションをお勧めします。

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

テーブルは検証に合格するという一般的な考えに反して、デザインレイアウトに使用すべきではないことに同意します。つまり、tableタグは非推奨ではありません。ラジオボタンを配置する最良の方法は、入力要素で調整されたマージンを使用して、垂直に中央CSSを配置することです。

0
PixelBlender