vertical-align: middle;が効かない時の対処法

Css

_新しい会社に入り、以前他の方が書かれたソースを編集する機会が増えてなかなか混乱することが多々あります。
特にcssの組み方に「これで大丈夫なのかな…」と思うことが多数(´∀`;)

念の為メモしておきます。

元のソース

See the Pen wpbwXb by MimuMasui (@Mimuko) on CodePen.

編集後のソース

See the Pen vpwBRa by MimuMasui (@Mimuko) on CodePen.

リンクが一箇所だけ2行になってしまったので、他のリンクボタンと高さを合わせたいのですが、そうすると文字が垂直中央に配置されず結局上記のような無理やり感あるソースにしてしまいました…。
ちなみにdisplay: flex;は会社のルール上使えませんw

もしもっとスマートないい方法をご存知の方がいらっしゃれば、是非教えていただきたいです。
line-heightを配置に使うって、個人的に嫌なんですが…うーん、難しい。

コメント