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

2018/09/25 2019/04/17

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

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

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

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

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

HTML

<div class="teacher">
    <img src="https://guuten.net/wp-content/uploads/2018/01/190_1.jpg" alt="">
</div>

</div>

CSS

.teacher{
   text-align:center;
}

.teacher{

text-align:center;

}

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

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

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

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

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

.header-list ul{
  position: relative;
  left: 50%;
}

.header-list li{
  position: relative;
  left: -50%;
}

.header-list ul{

position: relative;

left: 50%;

}

.header-list li{

position: relative;

left: -50%;

}

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