質問: お世話になっております。 表題の件ですが、添付画像のようにテキスト部分が微妙に上にずれます。 どうしたら上下中央に寄せることができるのでしょうか? それとも、ベースラインの関係でこれが正常なのでしょうか? ~下記補足~ + pタグの中にテキストを入れております。 + ブロックレベルなのでvertical-alignは効きません。 + line-heightは3にしてます。 + paddingは入れてません。 + リセットcssは数種類試しました。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/04ed6b1c58df5f289dc6b499159ab743.jpeg) ``` 文字が微妙に上にずれる ``` 以上、よろしくおねがいします。
回答: フォントによってbaselineとtext-after-edgeのバランスがそれぞれなので、描画結果を基準に中央を決めるとかでしょうか。 ``` div { height: 90px; font-size: 30px; background: gray; position: relative; } span { position: absolute; top: 50%; transform: translateY(-50%); display: block; line-height: 1; } ``` **動くサンプル:** 【理解しておきたい、CSSによるインラインレイアウトの仕組み(font-size/line-height編)Inline Layout─Frontrend Conference | HTML5Experts.jp】