HTMLとCSSで、チェックボックスやラジオボタンなどのINPUT要素を実装すると、いつもずれてしまいます。これを、縦方向に中央揃え（センタリング）して解決刷る方法です。

チェックボックス(ラジオボタン)を縦に中央揃えする

チェックボックスやラジオボタンなどのinput要素は、いつもちょっとずれてしまって、気持ちが悪かったんです。特にフォントを大きくした時に気になります。

まずはCSSとHTMLコード例から。ラジオボタンでも同様の方法が可能です。

See the Pen yVKrxB by Joe (@akajoe) on CodePen.

なぜ中央に揃うの？

こちらがコードを展開したものです：

<label>
  <input type="checkbox" name="my-check-list">HTMLと
</label>
<label>
  <input type="checkbox" name="my-check-list">CSSで
</label>
<label>
  <input type="checkbox" name="my-check-list">センタリングするお
</label>

<style>
label{
  display:block;
  position:relative;
  padding-left:1em;
}
label input{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  margin:auto;
}
</style>

label要素とinput要素の書き方

上記では、<label>タグで、<input>を囲んでいます。

<label>
  <input type="checkbox" name="hoge">チェックボックスの名前
</label>

こうすることで、テキストがクリック可能になるのです。

下記のように、<label for=”input要素のID“>としてもいいのですが・・

<label for="id-hoge">
  <input id="id-hoge" type="checkbox" name="hoge">チェックボックスの名前
</label>

今回、チェック縦に中央寄せするために、わざとlabelで囲んでいます。

Absoluteと自動マージンを使った中央寄せ

absolute要素に、top:0; bottom:0 でマージンをautoにすることでセンタリングします。これも常套手段ですね。

縦に自動で中央配置されるからくりはこちらの記事をどうぞ。

• CSSで、縦(上下)方向に中央寄せする方法、徹底解説。

その他のレイアウトのコツ

チェックボックスとテキストの間隔

さて、CSSとを見ますと、外側の<label>に対して、「padding-left: 1em」で、チェックボックス（ラジオボタン）のための隙間（インデント）を開けてます。これがないと文字とくっつき過ぎてしまいます。

emの単位は、その要素フォントサイズに相対的に変わりますのでここの「1em」は「だいたい一文字文の幅をあける」という意図ですね。私は、普段eｍは直感的にわかりにくいという理由で使わないのですが・・、こういう時には、フォントサイズに合わせで自動で感覚が調整されるので、便利だったりもします。

あと、別に「text-indent:1em」というプロパティでもよいです。text-indent指定は、あまり馴染みが少ないので、よく使うpaddingを採用しました。

ブラウザごとにinput要素の形が微妙に違いますので、あとは、padding-leftを微調整調整してみてください。

以上になります。