Webデザイン

CSSで横並びにしたリストを中央揃えにする

Webデザイン

横並びにしたリストを中央揃えにしたい時につまづいた際の対処法。

リストタグはblock要素になるので、inline要素にしてあげる。
inline要素にすれば、floatを使わなくても勝手に横並びになってくれます。

でも、リストタグはblock要素として使っておきたい。
という時に display:inline-block; を使うとよいとのこと。

下が記述例になります。

ul {
 text-align: center;
}

li {
 display: -moz-inline-box;
 display: inline-block;
 /display: inline;
 /zoom: 1;
 padding-right: 10px;
}

li a {
 background-color: #fff2cc;
}

確かにうまくいきました。
これ、iphone/Androidなどでも当たり前ですがちゃんと表示されました!

改訂版(2024年更新)

上記のコードは2021年に書いたものなので、ベンダープレフィックスがついていますが2024年現在では不要なので新しくコードを書き換えました。とはいえ、ベンダープレフィックスの部分を削除して少し見た目の調整をしただけですが…。

See the Pen CSSで横並びにしたリストを中央揃えにする by kenyo_c (@kenyo_c) on CodePen.

comment

  1. […] CSSコードはCSSで横並びにしたリストを中央揃えにするのページを参考にしました。 このコードを使用することでliはinline要素になり自動で横並びになってくれます。 inline要素とはdispla […]

タイトルとURLをコピーしました