CSSでレスポンシブのフッターデザインを中央揃えにしたい

Question

前提・実現したいこと

オンラインショップ（おちゃのこネット）のデザインで、ショップ案内のフッターを作っていますが、左よりになってしまいます。
文字は左揃えのまま、デザイン（タイトル含め）を中央揃えに修正したいです。

発生している問題・エラーメッセージ

デザインが全体的に左よりになってしまいます。

該当のソースコード

<h1>SHOP INFORMATION</h1>
 <br>
<div id="wrapper">

<div class="float2">
<h6>送料・配送について</h6>
<p>[送料]<br>
3500円以上で送料無料。<br>3500円未満で一律250円です。
</p>
<p>[配送業者]<br>
ヤマト運輸ネコポス
</p>
<p>[配送時間]<br>
ご注文、ご決済の翌日までに出荷いたします。<br>
ポスト投函のため、お届け日時はお選びいただけません。<br>
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/help#help_charge">詳しくはこちら</a></font></p>

</div>

<div class="float2">
<h6>お支払いについて</h6>
<p>お支払いはクレジットカード決済、楽天ペイ、振り込み（前払い）がご利用いただけます。<br>
<i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-mastercard fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-jcb fa-2x" aria-hidden="true"></i><br>
※銀行振り込みの振込手数料はお客様にてご負担いただきますようお願いします。
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/help#help_charge">詳しくはこちら</a></font></p>

<h6>返品・交換・キャンセルについて</h6>
<p>破損等で使用できない場合、お取替えいたしております。
イメージ違いなどの理由でのご返品はご遠慮ください。<br>
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/info">詳しくはこちら</a></font></p>

</div>


 <div class="float2 end">
<h6>お問い合わせ</h6>
    <font size=4><b>株式会社＠＠＠＠＠</b></font><br>
時間 / 11:00～17:00(月～金)<br>
休業日 / 土曜日 日曜日 ・祝日<br>
住所：〒＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠<br>
TEL：＠＠＠＠＠＠＠＠＠＠＠＠＠<br>
MAIL：＠＠＠＠＠＠＠＠＠＠＠＠＠<br>

</div>

/*フッターデザイン*/
@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

Comments

[退会済みユーザー]

centerタグとfontタグはHTML5で非推奨です。

[cherryz]

コメントありがとうございます。上記２点削除しました。

[退会済みユーザー]

えっとspanかdivとcssでも代用できます。

[退会済みユーザー]

すみません。非推奨ではなく廃止でした...

[cherryz]

ありがとうございます。初心者のため、具体的にどのように入れたらよいかを教えていただけると助かります。

Answer 1

まずはHTMLの各タグの構成や閉じ忘れ等を見直す必要があります。他の回答で出ていますが、今は使うべきではないタグ等はレイアウト崩れの原因にもなります。

そして、フッターそのものが#wrapperに収まっていません。まずは必要な要素をキチンと収めてください。その上での位置を決める必要があります。

確認方法として、#wrapperの背景色を白から別の色に変更してみてください。子要素全てがfloatされているので親となる#wrapperの高さが無い事が分かるかと思います。

Comments

[cherryz]

コメントありがとうございます。
最後のdivはコピペ忘れでした。ご指摘ありがとうございます。
子要素を全て#wrapperに収めました。
参考にした元ネタでは、レスポンシブではなく#wrapperの幅を100pxにしていたため、中央にそろっていたのですが、こちらで幅100%にしてレスポンシブにしたため、左よりになってしまったようです。
この状態で中央揃えにしたかったので、もし方法があればまだ教えていただきたいです。
初心者ですみません・・・。

[cherryz]

ご指摘の部分を修正し、floatの指定をmargin-leftに変更したところ、当初の想定の解決になりました。ありがとうございました。

[yoshinavi]

方法はいくつかありますが、レスポンシブだとfloatは結構ややこしくなります。

「レスポンシブしない」場合だと、floatの子要素を親要素で括り、その親要素をさらにfloatさせて左側に50％をとり、transformで-50％など、強引ですが「中央寄せも可能」です。

あと、細かい所ですが、最初の提示だと、#wrapperにwidth値「100％」ですが、左右paddingもあるので、その分ははみ出しスクロールが出る原因になりますので、今後このあたりも気を付けると良いかと思います。

[cherryz]

ありがとうございます。width値調整してみます。
自分のサイトと知人のサイト用で、素人ながら試行錯誤で作りました。ネットショップはレスポンシブの需要が高まっているので、今あるサイトも今後のためにレスポンシブで再現していきたいと思い、勉強中です。

Answer 2

@media screen and (max-device-width : 667px) {
  #wrapper {
    flex-direction: column;
    align-items: center;
  }
} 

このようにスマホビュー用にスタイルを当てるのはどうでしょうか

スマホビューで見た画像

Comments

[cherryz]

ありがとうございます。いただいたFlexboxを使ったcssにこちらを追加してみましたが、上記画像のようにならず、やはり三段が細長くつぶれてしまいました…。

[oh_rusty_nail]

スマホビューで見られているでしょうか？
横幅を狭めない(スマホサイズに合わせる)と変わらないです。

[cherryz]

PCを使い、シミュレーターで各デバイス表示を試したときはつぶれてしまったのですが、実際にスマホで表示したら縦並びになりました！大変失礼いたしました。これで思い通りになりました。本当にありがとうございました。

Answer 3

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;
}

Comments

[oh_rusty_nail]

Flexboxのイメージです。
https://mamewaza.com/support/blog/howto-use-flex.html

[cherryz]

ありがとうございます！イメージ通り、完璧です！！
こんなに早く、ありがとうございました。大変助かりました。

[oh_rusty_nail]

それはよかったです！
floatはあまり多用すると複雑になりますし、Flexboxが主流で簡単なのでオススメします。

[cherryz]

勉強します。ありがとうございました。

[cherryz]

ごめんなさい、スマホで見たところ、各段落が縦積みになるべきところが、三段のまま圧縮表示されてしまうようになりました。元のデザインでは、表示幅を狭めるとレスポンシブに段落が縦積みになっていくのですが・・・。その状態で中央揃えにできないでしょうか。

Answer 4

.wrapper {
text-align: center;
}
.float2 {
display: inline-block;
text-align: left;
}

参考

###追記

<center> ・文章や画像などのインライン要素はそれぞれにクラスかIDをつけて```.クラス名 {text-align: center;}```か```#ID名 {text-align: center;}``` ・divなどのブロック要素は上記と同様にクラスかIDをつけて```.クラス名 {margin: 0 auto;}```か```#ID名 {margin: 0 auto;}``` <font> ・基本は<span>でかこってCSSに```.クラス名 {font-size: ;color: ;}```や```#ID名 {font-size: ;color: ;}``` ・中にブロック要素があるときは<div>などのブロック要素を使って上記のようなCSSを入れてください 他にも方法はありますので'centerタグ 代用'や'fontタグ 代用'などで検索してみてください。

Comments

[cherryz]

早いコメントをありがとうございました！

[退会済みユーザー]

わからない点や実装方法が分からなければコメントしてください。

[cherryz]

ありがとうございます。centerとfont タグの所は修正できました。

[cherryz]

ただ、参考に書いていただいた .wrapperや .float2 の要素を入れると、配置が大幅に崩れてしまいます。

[退会済みユーザー]

画像等あげられますか？

[cherryz]

コメントありがとうございます。他の部分で自己解決しました。ご協力ありがとうございました。