画面がセンタリングされない。

Question

お世話になっております。
デザインレシピのflex-boxで、横並びの仮商品配列を作ったのですが、テストページでは、きちんと画面中心にセンタリングされていたのですが、いざ、本ページに仮登録してみると、左によってしまいます。
ページは
https://www.rakuten.ne.jp/gold/auc-jce/indextest.html
のスーパーSALE表示部分で、左揃えになってしまいます。
この部分だけ切り取って、htmlファイルにして実行すれば、全体がセンタリングしてくれるのですが、どこが影響しているのかわかりません。
ご教授していただければ助かります。
よろしくお願い致します。

Accepted Answer

ECマスターズの伊藤です。

flex-boxの記述については、デザインレシピより
きちんと設定いただけたようで、問題なく機能しております。

今回、ページが左に寄っているように見えているのは、
画像が９０％表示で、左寄せ（特に設定がないと、左寄せになります）で
表示されているため
全体が左に寄っているように見えております。

そのため、まずは class="img" が指定されている画像

の横幅を、１００％で表示するように、
修正をお願いいたします。

.img {width:90%;height:auto;text-align:center;}
↓
.img {width:100%;height:auto;text-align:center;}

しかし、画像を１００％にすると、画像がくっついて
表示されてしまうため、

の中に入っているdiv(＝画像やテキストなど、１商品を
入れているdiv)に、余白をつけるCSSの記述を
お願いいたします。

.col_box > div{margin :10px;}
※10の部分には、ご希望の余白となる
半角数字をご記入くださいませ。

上記２箇所を変更していだきますと、センタリングされた
レイアウトとなりますので、ご対応くださいますよう
お願いいたします。

Answer

ありがとうございました。
.col_box{　　　}
内に、margin:10px
とすればいいと思って、設定してもだめだったので、なんでだろうと思っていました。
今回はじめて、
.col_box > div{margin :10px;}
なる記述方法を見まして、もしよろしければ、私のmargin記述に関する勘違いおよび今回の記述についてご指摘ご教授いただければありがたいです。

Answer

ECマスターズの田中です。

.col_box{　　　} 内に margin:10px; を指定した場合、
１行分の全体に対して10pxの余白ができ、
商品同士の間隔は変わりません。

.col_box > div
は、
classが「col_box」であるタグに直接囲まれているタグ、
つまり、商品１つ１つを囲むタグを対象とするため、
.col_box > div{margin :10px;}
とすることで、商品１つ１つに余白を設定することができ、
さらに画像の横幅を100%にすることで、
余白が統一されて整然とした見た目にすることができます。

.col_box > div
のような、スタイルシートの対象を選択する部分は「セレクター」と呼ばれ、
下記のように、様々な種類がございます。
http://www.htmq.com/css3/#selector
今後、スタイルシートを直接修正される機会がございましたら、
ぜひともご一読の上、「こんなことができる」ということを
お含みおきいただければ幸いです。

Answer

ありがとうございます。
助かりました。スーパーSALE直前でしたので焦っておりました。
もっと勉強しないとだめですね。がんばります。
今後とも宜しくお願いいたします。