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

2018/09/25 2020/03/28

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

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

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

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

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;

}

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

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

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

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