CSSでラジオボタン・チェックボックスの位置ずれを調整する方法まとめ

input[type="radio"],input[type="checkbox"]{
  position: relative;
  top: 2px;
}

input[type="radio"],input[type="checkbox"]{

position: relative;

top: 2px;

}

はい。これで解決です。

位置調整は、「top」プロパティで行います。

また、選択ボックスとテキストの間が詰まっている時は、「margin-right」を指定すると、調整ができます。

input[type="radio"],input[type="checkbox"]{
  position: relative;
  top: 2px;
　　 margin-right: 2px; /*追加*/
}

input[type="radio"],input[type="checkbox"]{

position: relative;

top: 2px;

　　 margin-right: 2px; /*追加*/

}

↓こんな感じ

ぼく

これで縦横の位置が綺麗に揃った選択ボックスの完成です。

ただ、この方法には一つだけデメリットがあります。

それは…

文字サイズを変更したら位置がずれること。

なので、文字サイズを変更する度、「top」の数値を変更する必要があります。

…ぶっちゃけめんどくさい。

そう感じた方は「vertical-align」を使用しましょう。

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

input[type="radio"],input[type="checkbox"]{

vertical-align:middle;

}

これも超簡単。

「vertical-align:middle」を指定することにより、選択ボックスの位置が、テキストの中央に揃います。

ぼく

選択ボックスの位置が、テキストに付随している為、文字サイズをいくら変更しようが、自動的に位置が調整されます。

なので、デバイスごと（PC・スマホ・タブレット）で文字サイズを変更する場合は、「vertical-align:middle」で指定した方が楽ですね。

ただ、こちらの方法にもデメリットがあります。

それは…

細かい位置調整ができないこと。

「vertical-align」は、半角文字を基準値としている為、日本語（大文字）だと微妙にずれが生じる可能性があります。

上の画像でいうと、選択ボックスが微妙に上にずれている為、文字の中心に配置される様、調整を加えたいところですが、できません。（top・middleなど大まかな位置指定しかできない。）

ぼく

正確に言うと、vertical-alignでも、数値を入力することで、細かい位置調整はできますが、position:relativeと内容が被る為、割愛します。

なので、ピタッと位置を揃えたいねん！！って方は、「position relative」を使って指定した方が良いですね。

まとめ

「position:relative」 or 「vertical-align:middle」のどちらかを使用して選択ボックスの位置を調整する。
「position:relative」の場合、細かい位置調整ができるものの、文字サイズを変える度に「top」の数値も変える必要がある。
「vertical-align:middle」の場合、文字サイズの大小に関係無く、選択ボックスの位置が調整されるが、日本語の場合だと微妙にずれが生じる可能性がある。その際、細かい位置調整はできない。

どちらを選んでも一長一短。ちなみにぼくなら「position:relative」を選びます。（ピタッと位置を揃えたいねん！！）

ぼく

ちょっとしたことですが、どういう風に解決すれば良いのかしばらく悩みました。こういった無駄な時間を早よ無くしていきたい…