開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

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

最終更新:2017-08-08 by Joe

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

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

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

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

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

なぜ中央に揃うの?

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

label要素とinput要素の書き方

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

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

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

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

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

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

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

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

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

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

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

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

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

以上になります。