現象
Googleが提供するMaterial Design Iconsを使用しています。
文中にリンクを設置し、合わせて新規タブで開くことを示すこのようなアイコンを使用した際、
意識しないと少し上にズレてしまう現象が起こりませんか？
今回は解決したときの備忘録として記します。
解決法
2パターンご紹介します。
コードとイメージ図
See the Pen 【CSS】文中のアイコンを上下に揃える by YousukeSasaki (@yousukesasaki) on CodePen.
前提
- 赤枠は通常の
pタグ、青枠はリンク部分のaタグです。 - 文字とアイコン共に
font-size: 24px -
line-height: 24pxで文字の大きさと統一
①アイコンに対してvertical-align: ◯◯pxで微調整
垂直方向の位置を調整するなら真っ先に思いつくのがvertical-alignプロパティですよね。
真ん中に揃えたいのだからvertical-align: middleでいいのでは？と私も思ったのですが、
英字・ひらがな・漢字・アイコンなど…
様々な物を1つの文章の中に載せようとすると
基準となる中央が揃わなくなってしまうみたいです…
こちらのサイトでわかりやすく図で紹介されているので気になった方はご覧ください。
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp
なのでmiddleを使うのではなく、面倒ではありますが
vertical-alignを何も指定しない場合の初期値baselineから
上下に微調整する方法として、◯◯pxなどの具体的な値を入力します。
冒頭の画像は文字とアイコン共に24pxで揃えておりますが、
アイコンが上に3pxズレていたので今回は-3pxとして下方向にズラしました。
baselineの詳細はこちら
vertical-align－スタイルシートリファレンス
②リンクに対してdisplay: inline-flexとalign-items: centerの組み合わせ
青枠のaタグに
-
display: inline-flexと align-items: center
を付けています。
inline-flexとは
「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。
FlexBoxの使い方（４）〜display:inline-flexについて（動画あり） | IT工房｜AI入門とWeb開発
Flexboxをinline要素の中で使うことができるんですね。これは便利！
なので青枠のリンク全体をFlexboxとしてしまい、
Flexboxの中でalign-items: centerで垂直方向に中央寄せにする方法です。
補足
冒頭のイメージ図をご覧になっていただいておわかりの通り、
両者の1番の大きな違いは
pタグがborderを含んだ高さとなるかならないかです。
イメージ図では視覚的にわかりやすくするためにあえてボーダーを（しかも太めに）設定していますが、
通常は文章中にborderを設定することはないのであまり気にしなくても大丈夫かと思います
また、文字とアイコンのfont-sizeが同じでも、
隣り合う文字とアイコンの組み合わせによっては必ずしも見た目が揃うとは限らないので、
適宜アイコンの方のサイズを調整してください。
以上です！