質問: ### 前提・実現したいこと オンラインショップ(おちゃのこネット)のデザインで、ショップ案内のフッターを作っていますが、左よりになってしまいます。 文字は左揃えのまま、デザイン(タイトル含め)を中央揃えに修正したいです。 ### 発生している問題・エラーメッセージ デザインが全体的に左よりになってしまいます。 ### 該当のソースコード ``` SHOP INFORMATION 送料・配送について [送料] 3500円以上で送料無料。3500円未満で一律250円です。 [配送業者] ヤマト運輸ネコポス [配送時間] ご注文、ご決済の翌日までに出荷いたします。 ポスト投函のため、お届け日時はお選びいただけません。 詳しくはこちら お支払いについて お支払いはクレジットカード決済、楽天ペイ、振り込み(前払い)がご利用いただけます。 ※銀行振り込みの振込手数料はお客様にてご負担いただきますようお願いします。 詳しくはこちら 返品・交換・キャンセルについて 破損等で使用できない場合、お取替えいたしております。 イメージ違いなどの理由でのご返品はご遠慮ください。 詳しくはこちら お問い合わせ 株式会社@@@@@ 時間 / 11:00~17:00(月~金) 休業日 / 土曜日 日曜日 ・祝日 住所:〒@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ TEL:@@@@@@@@@@@@@ MAIL:@@@@@@@@@@@@@ ``` ``` /*フッターデザイン*/ @charset "utf-8"; #wrapper { width:100%; margin:0 auto; padding:30px 50px 20px; background-color:#888 } .float2 { float:left; width:300px; margin-left:50px; } .float2_end { margin-right:0; } h5 { color:#fff; text-align:center; font-size:36px; line-height:100px; } h6 { border-bottom:2px solid #333; font-size:14px; font-weight:bold; line-height:28px; } table { font-size:9px; width:298px; border:1px solid #CCC; } ``` ### 試したこと 元々は、サイトで見つけたテンプレートを使用してみましたが、利用サイトで実装すると三段組にならず幅が狭く二段になってしまうこととレスポンシブにならなかったため、色々いじってこの形になりました。 ### 補足情報(FW/ツールのバージョンなど) 参考にしたサイト(カレンダーつきの部分) http://www.billionplan.com/blog/ec/rakuten-template-footer.html
回答: Flexboxを使うと簡単にできるのでコード貼ってきます。 ``` /*フッターデザイン*/ @charset "utf-8"; #wrapper { width:100%; margin:0 auto; padding:30px 50px 20px; background-color:#ffffff; display: flex; justify-content: center; } .float2 { width:300px; margin-right:50px; } .end { margin-right:0; } h5 { color:#fff; text-align:center; font-size:36px; line-height:100px; } h6 { border-bottom:2px solid #333; font-size:14px; font-weight:bold; line-height:28px; } table { font-size:9px; width:298px; border:1px solid #CCC; } ``` !イメージ