IT30

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

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

2019.07.09 更新

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

 

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

 

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

 

短めのタイトル

 

(間にコンテンツが入る)

 

長めのタイトルが入るパターン

 

(間にコンテンツが入る)

 

もっともっと長めのタイトルが入るパターン

 

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

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

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

 

1行で解決w

とでも簡単な話でした。

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

display: table;
margin: 0 auto;

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

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

マレーシアの日系IT企業で働く30代のウェブエンジニアの備忘録ブログです。

基本は過去わからなくて悩んだコーディングや諸々の設定方法などをメモ代わりに書き留めています。

ウェブコーディングやワードプレスの勉強中の方や同じ問題で悩んでいる方のお力になれたら嬉しいです。

ウェブサイトの制作依頼をマレーシアのローカル企業にご依頼されて大変な思いをしたことはございませんか?

安価が魅力のマレーシア企業ですが、お国柄どうしても…
「期日を守らない」「連絡がおろそか」「上手くコミュニケーションが取れない」
などのお悩みをかかえることがあると思います。

かと言って日系の企業はマレーシアの企業よりも値が張るため予算的に合わない。

私もマレーシアで働くからこそ、その大変さを理解した上でご提案があります。