要素（テキストなど）の幅に合わせてwidthを可変にした上でmargin: 0 auto;を使えるようにする方法

なんとも伝わりにくい状況なのですが…テキスト（コンテンツのタイトルなど）に同じクラスを付けて、backgroundを指定した上でセンタリングしたいときに何気に苦戦したので解決方法をメモしておきたいと思います。

要素のwidthがコンテンツに内容によって可変幅の場合、margin: 0 auto;が効かない

むしろ今までよくここでつまずかなかったなと思うのですが、このような仕様にしたいと思ったときに使えるCSSがすぐに書けませんでした…。

タイトルを全て同じクラスで対応しようとした時に、widthを指定しないとbackgroundが画面幅になってしまったり、widthを指定するとタイトルの長さに合わせた可変幅にならない。

あちらを立てればこちらが立たず、こちらを立てればあちらが立たず…となってしまいました。

もちろん各タイトルに別々でCSSをあてることも出来るのですが、それでは単純にコード量が多くなってしまい変更があった際やレスポンシブに対応にくいです。

1行で解決w

とでも簡単な話でした。

知らないというのはやはり罪ですね。

display: table;
margin: 0 auto;

上記で可変幅でも中央合わせが可能になります。

戒めも込みでメモしておきます(^^;;