text-align: center;を加えると、なぜか要素が左寄せになる理由について

ご回答者様

いつもお世話になっております。

「text-align: center;を加えると、なぜか要素が左寄せになる理由」についてご質問させていただければと存じます。

早速ですが、以下のコードがあるとします。

html
1<div align="center" style="margin-top: 30px;">
2 <div>
3   <div class="midashi_first4">
4     <div class="text-center">
5	<img src="img/kachi1.jpg" class="img-responsive wow bounceIn" data-wow-duration="1000ms" data-wow-delay="600ms">
6     <img src="img/kachi2.jpg" class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
7     <img src="img/kachi.png" class="img-responsive wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">	
8   </div>
9    </div>
10      
11    </div>
12 </div>

css
1.img-responsive{
2	display: block;
3}
4.midashi_first4{
5	background-image: url(../img/bg_global.jpg);
6	background-repeat: no-repeat;
7}

Chromeブラウザ表示

＜画像の説明＞
img/kachi1.jpg：431×88px（社会貢献活動）

img/kachi2.jpg：425×166px（ゲーム１本からできる社会貢献活動→）

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（ゲーム１本からできる社会貢献活動→）

img/kachi.png：945×116px（ゲーム王国では、～～～）

がなぜか左寄せされます。

css
1.text-center{
2	text-align: center;
3}

Chromeブラウザ表示

なぜtext-align: center;で左寄せされるのでしょうか？
また、
.img-responsive{
display: block;
}
で画像がブロックレベル要素になっているのにtext-align: center;で動くのでしょうか？

align="center"が古い書き方でサポート外かと存じますが、今回の挙動の理屈を教えていただけますと幸いです。

以上、何卒よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

text-alignは、通常インラインのみに適用されるため、display:block を指定した画像は対象外です。

ひょっとしたら属性の align="center" 指定が、CSSの text-align: center の指定と同じと思っているかもしれませんが、違います。
align="center" は、text-align: -webkit-center(Fxなら-moz-center)というCSSが適用され、blockの配置も変更してしまいます。
それを上書きするため、align="center"がきかなくなったということになります。

https://developer.mozilla.org/ja/docs/Web/CSS/text-align

blockの中央寄せは次のCSSで行ってください。

CSS
1margin-right: auto;
2margin-left: auto;

投稿2018/12/03 07:49

x_x

総合スコア13749

bah91929

2018/12/03 08:49

早速のご回答ありがとうございます。また、前回もお世話になったと記憶しております(^^) align="center"でブロック配置をセンタリングするのは理解しているつもりですが、 cssでtext-align: centerを指定すると、display:block化しているので、挙動に変化がないはずだと思うのですが。。 img/kachi1.jpg：431×88px（社会貢献活動） img/kachi2.jpg：425×166px（ゲーム１本からできる社会貢献活動→） img/kachi.png：945×116px（ゲーム王国では、～～～）が左寄せれるのは何故でしょうか？^^; ご指摘の通り、

x_x

2018/12/03 08:55

冒頭に述べた通り、text-alignは、通常インラインのみに適用なのでこれら画像には適用されません。 -webkit-centerは(歴史的経緯による)特殊実装とお考えください。

think49

2018/12/03 10:18

> 左寄せれるのは何故でしょうか？^^; 何も指定がなければ、ブロックボックスは左寄せになるという挙動は理解していますか。

yoshinavi

2018/12/03 12:17

質問者さんへ「align="center"」これを、コードからも、頭からも削除してください。その上で、「x_x」さんや「think49」さんのコメントをしっかり読み返すことで、理解出来るかと思います。

bah91929

2018/12/04 01:44

x_x様ご回答ありがとうございます。 align="center"とtext-align: centerの指定が違うことは理解してるのですが、違うものなのに上書きされるのでしょうか？

x_x

2018/12/04 02:29

text-align の値が -webkit-center から center になっています。

bah91929

2018/12/04 04:16 編集

早速のご回答ありがとうございます！ご教授くださったように、align="center" はtext-align: -webkit-center(Fxなら-moz-center)。 blockの配置を変更する働きがある。それをtext-align: center（blockの配置を変更する働きなし）で上書きしてしまうから、ブロック要素が通常の配置（左寄せ）に戻ったという事ですね！上記の理解でお間違いないでしょうか？

x_x

2018/12/06 01:28

はい

bah91929

2018/12/06 01:35

ありがとうございました！

行動規範の内容に同意します