ulで囲んだコンテンツが中心にこない場合の解決策

ulで囲んだコンテンツが中心にこない場合の対処法です。

ulで囲んだコンテンツが中心にこない場合の問題

ulで囲んだコンテンツが、text-align:center;やmargin:0 auto;を使用しても中心にこない。

ulで囲んだコンテンツが中心にこない場合解決策

解決が簡単な順に説明します。

1.text-align:center;、margin:0 auto;

text-align:center;やmargin:0 auto;の使い方を誤っていないか確認する。

spanタグやaタグ、imgタグにはtext-align:center;

HTML

CSS

 p、div、ul、h1〜h6はmargin:0 auto;

p、div、ul、h1〜h6などのタグにはmargin:0 auto;を指定します。

こちらにわかりやすくまとめられています。

2.ulを囲んでいるタグが偏っていないか

青くハイライトされた部分がul、会社概要などがliの場合、それを囲っているheader-listが偏っていないか確認しましょう。

これにmargin-rightやpadding-rightなどに数字がついていたらこれが原因です。