見出しを角丸長方形で囲って上下中央にする方法が知りたいです。

Question

これは自分が作ったランディングページなのですが、小見出し(beforeとafter)を角丸の中に入れて、上下中央にしようとしました。

しかし、左右はぴったり中央だと思うのですが、上下が中央ではなくて、若干上側に配置されているような気がします。
これはどうしたらよいでしょうか？もし上下中央で自分の勘違いでしたら、申し訳ありません。

自分のこちらのコードを記載しますので、ご親切な方いましたらご回答よろしくお願いいたします。

<h3>after</h3>

h3 {
background-color: black;
width: 100px;
height: 30px;
border-radius: 50px;
line-height: 30px;
text-align: center;
}

Answer 1

フォントによるものかもしれません．
g や p のような下側に突き出た文字とバランスを取るために下にスペースがあるものがあります．

Comments

[hurora]

ご回答頂きましてありがとうございます。
ということは、自分のやり方で上下中央ぴったりになるということですね。

ありがとうございました。

Answer 2

どこの何がわからないか読み取れませんが
heightとline-heightが同値であれば縦方向はセンタリングされます
（改行されなければ）

<style>
h3 {
background-color:crimson;
color:white;
font-weight:bold;
width: 100px;
height:50px;
border-radius: 50px;
line-height: 50px;
text-align: center;
}
</style>
<h3>after</h3>

Comments

[hurora]

ご回答ありがとうございます。
自分のやり方で問題ないようですね。
引き続きこのやり方でやろうと思います。