テキストの垂直中揃え

高さ60pxのツールバーに適当にspanでテキストを表示していたのだが、高さ50px margin: 5pxの画像を入れたら下にはみ出すようになった。

https://gyazo.com/dd51c789e95217900e1979e679bc28ce

これはspanの縦方向のalignが「ベースラインを合わせる」というものなのでgなどのベースラインの下に突き出している文字が突き出すのだ。vertical-align: 50%; をすればline-heightの50%だけ上に移動する

https://gyazo.com/92b132528db2db25eb44ec71cc92b08c

きっちり中央に揃えたければずれてる量をpxで逆に動かしてやればいいけど、どうせ近々全部アイコンになるので今回は頑張らないことにした。