Wordpressの見出し（hタグ）を中央揃えにしたい

Question

前提・実現したいこと

素人の質問で申し訳ありませんが、Wordpressで設定しているh2の見出しの文字を中央に配置したいのですが、text-align:center;などを用いても左詰めになってしまいます。以下のcssをどう修正すればよろしいでしょうか。

該当のソースコード

h2#tagu2{
font-size: 2em;
text-align:center;
position: relative;
display: inline-block;
padding: 0 45px;
}

h2#tagu2:before, h2#tagu2:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 1px;
background-color: black;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}

h2#tagu2:before {
left:0;
}

h2#tagu2:after {
right: 0;
}

試したこと

タグ自体を以下のように中央揃えに指定してみても左詰めのままとなっており、
なにか方法があれば教えて頂けると嬉しいです。

<h2 id="tagu2" style="text-align: center;">見出し２中央揃え</h2>

補足情報（FW/ツールのバージョンなど）

CSSの修正はSimple Custom CSSというプラグインを使って、hタグだけ編集できる状態で触っています。

Answer 1

とりあえずh2#tagu2 の display: inline-block; を削除したら中央寄せになるけど、たぶんこれは希望の結果とは違うかな。

HTMLを変更していいなら、

<div id="tagu2-wrapper">
  <h2 id="tagu2">見出し２中央揃え</h2>
</div>

というようにラッパーで囲んで、それにtext-align: center;を設定すればいいでしょう。

#tagu2-wrapper {
  text-align: center; 
}

Comments

[sorathi]

２つ目の方法で理想通りの見栄えになりました！
ご教示いただきましてありがとうございました。