More than 3 years have passed since last update.

【css】リスト(li)を横並び、かつ中央寄せにする方法！

Last updated at 2021-11-06Posted at 2021-11-06

リストに使う、「ul」や「li」を横並びで中央に寄せようとするとうまくいかなかったため、これならできたぁってのを載せておきます！

簡易的なリスト↓

list.html

<ul>
 <li>リスト１</li>
 <li>リスト2</li>
 <li>リスト3</li>
</ul>

これさえあれば、横並び中央にできる↓

list.css

ul {
 text-align: center;
}

li {
 display: inline;
}

これだけだと、余白だったりが気になるので、
li部分にmarginを仕込むといいですよ！

ちなみに、floatを使うとうまくいかんかった(T-T)
正直、float使うと、「・」を取るコードが必要なんやけど、**display: inline;**使うと勝手に無くなってくれるのでコードの短縮にもつながる！