質問: ご回答者様 いつもお世話になっております。 「text-align: center;を加えると、なぜか要素が左寄せになる理由」についてご質問させていただければと存じます。 早速ですが、以下のコードがあるとします。 ``` ``` ``` .img-responsive{ display: block; } .midashi_first4{ background-image: url(../img/bg_global.jpg); background-repeat: no-repeat; } ``` Chromeブラウザ表示 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/f89320593daadaa84071ca2395c696b3.png) <画像の説明> img/kachi1.jpg:431×88px(社会貢献活動) img/kachi2.jpg:425×166px(ゲーム1本からできる社会貢献活動→) img/kachi.png:945×116px(ゲーム王国では、~~~) ../img/bg_global.jpg:1170×364px(地球の背景画像) 1行目のコードで「align="center"」を指定しているため、その内部の要素がセンタリングされています。 しかしここで、以下のcssコードを追加すると、 img/kachi1.jpg:431×88px(社会貢献活動) img/kachi2.jpg:425×166px(ゲーム1本からできる社会貢献活動→) img/kachi.png:945×116px(ゲーム王国では、~~~) がなぜか左寄せされます。 ``` .text-center{ text-align: center; } ``` Chromeブラウザ表示 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/cca9497c592a9885b2842dd97f4efe38.png) なぜtext-align: center;で左寄せされるのでしょうか? また、 .img-responsive{ display: block; } で画像がブロックレベル要素になっているのにtext-align: center;で動くのでしょうか? align="center"が古い書き方でサポート外かと存じますが、今回の挙動の理屈を教えていただけますと幸いです。 以上、何卒よろしくお願いします。
回答: text-alignは、通常インラインのみに適用されるため、display:block を指定した画像は対象外です。 ひょっとしたら属性の align="center" 指定が、CSSの text-align: center の指定と同じと思っているかもしれませんが、違います。 align="center" は、text-align: -webkit-center(Fxなら-moz-center)というCSSが適用され、blockの配置も変更してしまいます。 それを上書きするため、align="center"がきかなくなったということになります。 blockの中央寄せは次のCSSで行ってください。 ``` margin-right: auto; margin-left: auto; ```