WordPressテーマSANGOの質問

見出しをCSSで中央寄せさせたい

ふかいくろ

2018/07/28

お世話になっております。
見出し4をCSSで中央寄せにしたいのですが方法がわかりませんので教えていただきたいです。

.entry-content h4{
position: relative;
display: inline-block;
padding: 0 55px;
text-align: center;
}

.entry-content h4:before, .entry-content h4:after{
content: ”;
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}

.entry-content h4:before {left:0;}
.entry-content h4:after {right: 0;;}

いまはこのコードを使っていますが、どうやっても中央寄せにできません。よろしくおねがいいたします。

SANGOでデフォルトの見出しを変える方法

コメントへの回答

サルワカくん

2018/07/29

text-align: center;は中にあるテキストに対して中央寄せが適用されます。
今回の場合、display: inline-block;をh4に対して指定しているため、中央寄せするためには、そのタグ自体ではなく、前後のタグにて中央寄せの指定をする必要があります。

<div class="center">
  <h4>〜</h4>
</div>

例えば、テキストエディタで上のように書く必要がありますね。