テキストの垂直中揃え

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

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

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