[HTML & CSS General] 見出し要素に対してテキストの幅に合わせた下線と中央寄せのスタイルを付ける

公開日: 2018/12/27

CMS が出力する要素に対してスタイリングをする場合、Wrapper div の追加は行われないことが多いでしょう。
そのため1つの要素で装飾をできるように CSS を書く必要が出てきます。

例えば見出し要素に対してテキストの幅に合わせた下線と中央寄せのスタイルを付けるにはどうするべきでしょうか。

CSS に慣れた方ならば display を利用すれば良いと直感的に分かると思いますが、私は display: ? の ? が思い出せませんでした。
下記の記事でたくさん触れられていたことは思い出せたのですが。。。

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD

結論から言うと display: table を利用することで実現できます。
inline-block はテキストの幅は取得できますが、中央寄せのスタイルがあてられません。

See the Pen The CSS heading styling with text width underline and text align center by DriftwoodJP (@DriftwoodJP) on CodePen.

よく利用される block, inline-block, table, flex については、下記の記事が参考になりました。
ありがとうございました。

補遺

追加の装飾について。