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

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

 

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

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

 

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

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

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

spanタグやaタグ、imgタグにはtext-align:center;を指定する

ポイントはこれらのタグの親タグに指定すること

HTML

CSS

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

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

 

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

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

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

 

3.ulとliをfloatで横に並べて、ulを右に50%、liを50%左に移動させる。

上記1,2や、「6.指定が反映されない」問題を解決しても、コンテンツが中央にこない場合、この方法を使いましょう。

汎用的に使えるのは以下のコードです。

こちらの「positionを使う」という解決策にも解説があるので、ご覧ください。