ulで囲んだコンテンツが中心にこない場合の対処法です。
目次
ulで囲んだコンテンツが中心にこない場合の問題
ulで囲んだコンテンツが、text-align:center;やmargin:0 auto;を使用しても中心にこない。
ulで囲んだコンテンツが中心にこない場合解決策
解決が簡単な順に説明します。
1.text-align:center;やmargin:0 auto;の使い方を誤っていないか確認する
spanタグやaタグ、imgタグにはtext-align:center;を指定する
ポイントはこれらのタグの親タグに指定すること
HTML
1 2 3 |
<div class="teacher"> <img src="https://guuten.net/wp-content/uploads/2018/01/190_1.jpg" alt=""> </div> |
CSS
1 2 3 |
.teacher{ text-align:center; } |
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.指定が反映されない」問題を解決しても、コンテンツが中央にこない場合、この方法を使いましょう。
汎用的に使えるのは以下のコードです。
1 2 3 4 5 6 7 8 9 |
.header-list ul{ position: relative; left: 50%; } .header-list li{ position: relative; left: -50%; } |
こちらの「positionを使う」という解決策にも解説があるので、ご覧ください。