チェックボックスとテキストのズレを直したい素人

はじめに

　先日、チェックボックスとラベルのテキストのズレを直すのに少し手間取ってしまったので書いておきます。

解決方法

　vertical-alignやpositionでの解決方法がネットでは多かったのですが、うまくいかなかったので（ヤバイCSSだったので何らかのプロパティが邪魔していたのだと思う）Flexboxで解決しました。

実践

チェックボックスやテキストを修飾していると両者のズレが目立ってきます。

HTML

<div>
  <label><input class="checkbox">チェックボックス</label>
</div>

CSS

.checkbox {
  font-size: 50px;
}

　以下のようにして修正することで解決しました。同様の手法はラジオボタン等でも有効でした。

CSS

.checkbox {
  font-size: 50px;
  display: flex;
  align-items: center;
}

おわり

　Flexboxはとても便利なので思考停止で使ってしまいます。その一方で、Flexboxのプロパティ名やそれらの挙動は覚えきれないので下記のデモサイトをよく使っています。便利なので是非使ってみてください。
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/