横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info

HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;

[perry-tips]

“ul { list-style-type: none; padding-left: 0;}li { background: #CCC; width: 50px; height: 50px; padding: 10px; margin: 10px;}.float { width: 270px; margin: auto; overflow: hidden;}.float li { float: left;}.inline { text-align: center;}.inline li { display: inline;}.inline-block { text-align: cente

[RITZMEDIA]

“inline-block { text-align: center;}.inline-block li { display: inline-block;}”

[momijitan]

めちゃ見やすくてわかりやすい！神！！

[k_ume75]

わかりやすいまとめ。/古いブラウザ・新しいブラウザ用

[masapon49]

わかりやすくまとまってていい

[simazoe]

"li横並び"秀逸なまとめ！

[dirablue]

css レイアウト

[fnma]

“display: inline;”

[karumado]

ul li　要素の横並べ中央寄せ

[idiotcomputer]

こういうのも新しいTipsが出るので精査

[lavitaebella]

ulを中央揃えする方法

[xxx141]

ブロック要素横並び

[lotus_tribal]

display:inlineステキ。

[rinfuji_s]

メニュー中央寄せ

[rskmt346]

リストのセンター揃え

[yo-11-06]

みんなが探してたやつ俺が見つけてきてあげたよ！！

[axcel-work]

社内の人のやつが役立った瞬間