html - cssでH2タイトルタグのトップギャップを残す方法

Question

My Sidebar には、H2 タイトルの背景画像が赤色になっています。

h2 タイトル タグを垂直方向と水平方向の両方で中央揃えにしたい。

使用しtext-align: center;ました。その結果がこれです。

その水平方向の中央揃えのみで、垂直方向の中央揃えではありません。追加vertical-align: middle;しましたが、効果はありませんでした。試してみmargin-topましたが、そのようなコードがないかのように動作しました

最後に、試してみました

 margin-top: auto;
      margin-bottom: auto;

それでもうまくいかなかった

CSS全体

 #sidebar-wrapper h2 {
     background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
     color: rgb(213, 213, 213);
     height: 50px;
     width:294px;
     margin-top:10x;
     overflow: visible;
     position: relative;
     left: -16px;
     text-align: center;
     color:white;
     margin:0 0 10px
 }

余白の最後の行を変更すると、赤い背景とタイトルの両方が移動します (タイトルだけではありません)。これが私のサイトです。誰か助けてください。ありがとう。

Answer 1

line-height を使用する必要があります。

#sidebar-wrapper h2 {
    background: url("https://lh6.googleusercontent.com/-FRYoELCr4cs/UWqPgG1XTjI/AAAAAAAAHZs/_825mjRMqrg/s295/54454554+copy.png") no-repeat scroll 0% 0% transparent;
    color: rgb(213, 213, 213);
    height: 50px;
    width:294px;
    margin-top:10x;
    overflow: visible;
    position: relative;
    left: -16px;
    text-align: center;
    color:white;
    margin:0 0 10px;
    line-height:50px;
}

Answer 2

相対位置を使用できます。上を試してみてください: 10px.