以前、「CSSで右寄せ・左寄せ・中央寄せする」をメモりましたが、それだけでは、中央に寄らないものがあります。
それは、リスト要素です。
ただリスト要素を中央寄せにするのは、前に紹介した記事で出来ますが、メニューやソーシャルボタンなど、リスト要素を並べて中央寄せにする場合が曲者です。
何度、泣かされたことか。
寄せる・揃える編、これが山場でございます。
今回は、それらを整理メモしていきます。
デモについて(HTMLとCSSの注意点)
HTMLは、ほぼほぼこのコーディングを使っています。
追記があれば、各コーディングのところで補足します。
<ul class="demo*"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul>
また各デモでは、分かりやすいように線など装飾系のコーディングを書いています。
説明では、装飾系のコーディングは割愛しています。
marginを使う
.demo1{ width: ***; margin-right: auto; margin-left: auto; } .demo1 li{ float: left; }
この場合、リスト要素の横並びは、float
で並べていますが、後述のdisplay
を使ってもOKです。
「margin
を使う方法」は、「CSSで右寄せ・左寄せ・中央寄せする」で紹介した要領と同じです。
リスト要素の左右にmargin:auto;
を設定します。
中央寄せの基本ということで、直感的にコーディングできます。
See the Pen margin-list-center by webfeelfree (@webfeelfree) on CodePen.4259
しかし、この方法は、リスト要素にwidth
(幅)を指定しなければならないデメリットがあります。
これが、何を意味するかというと、例えば・・・
・新しくメニューを追加したとき、デザインが崩れる
・OS依存で、フォントのサイズや種類が変わってしまいデザインが崩れる
などの問題を引き起こしてしまいます。
そのため、幅を設定しなおしたり、見越して設定しなければならないので、メンテナンス性の低いコーディングになってしまいます。
逆に表っぽいデザインの固定幅のリストには、威力を発揮するコーディングと言えますね。
inlineを使う
.demo2{ text-align: center; } .demo2 li{ display: inline; }
display
を使って、リスト要素にinline
を指定して横並びにしています。
inline
(インライン)とは、ザックリいうと、複数行のリストを1行の文字列にするという感じです。
インライン(文字列)にすることによって、text-align
が効くようになります。
非常にシンプルなコーディングです。
See the Pen inline-list-center by webfeelfree (@webfeelfree) on CodePen.4259
簡単でいいのでは?と思いますが、デメリットもあります。
それは、<li>
を改行したときに余計な空白が入るという事です。
デモは「margin
を使う」方法と同じ余白を設定していますが、余白が広くなっています。
それじゃ~改行しなければいいのでは?と思いますが・・・それはそれで正解です。
ですが、HTMLの見栄え・視認性が悪くなり、メンテナンス性の低いコーディングになってしまいます。
他にも、余白をなくす方法がありますが、結局のところ一手間、加えることになります。
余白が気にならない、影響しないという人は、コーディングもシンプルですし、アリだと思います。
inline-blockを使う
.demo3{ text-align: center; } .demo3 li{ display: inline-block; /display: inline; /zoom: 1; }
「inline
を使う」方法との相違になりますが、inline
がinline-block
になったことと、6行目と7行目に、IE7とIE6に対応するためのコードを追記しています。
inline-block
は横並び(インライン)にしつつ、<li>
に幅と高さを指定することができます。
インライン要素とブロック要素を掛け合わせた便利な属性です。
See the Pen inline-block-list-center by webfeelfree (@webfeelfree) on CodePen.4259
こちらもシンプルなコーディングですが、「inline
を使う」方法と同じように余計な空白が入ってしまいます。
そして、前述したようにIE7とIE6に対応するための追加のコーディングが必要になってきます。
potisionを使う
.demo4{ position: relative; overflow: hidden; } .demo4 ul{ position: relative; left: 50%; float: left; } .demo4 li{ position: relative; left: -50%; float: left; }
親切な人が考え出して、親切な人が布教してくれているコーディングです。
float
で並べて、<ul>
要素を右に50%移動させて、<li>
要素を左に50%移動させています。
何を言っているのか?ワカンネ??っていう複雑なところがデメリットでしょうか?
See the Pen position-list-center by webfeelfree (@webfeelfree) on CodePen.4259
ここでは、HTMLでリスト要素を<div>で囲まなければならないことにも注意が必要です。
float
したら、clear
などを使って、float
を解除するのが定石ですが、このコーディングは、改めてfloat
を解除する必要がありません。
ただ、IE6はfloat
が解除されないようです。
XPと一緒に、IE6は、もうすぐなくなりそうですが・・・
とりあえず、コピペとclass指定だけで、簡単にリスト要素を中央寄せできる感じです。
and one-おまけ-
.demo5{ position: relative; left: 50%; float: left; } .demo5 li{ position: relative; left: -50%; float: left; } p{ clear: both; }
最後におまけ程度で・・・「position
を使う」方法のコーディングの余計な贅肉を取ってみました。
See the Pen potision-clear-list-center by webfeelfree (@webfeelfree) on CodePen.4259
私自身、HTMLに余計な記述を入れるのが好きではないので<div>
を外した方法です。
仮想テストはしたんですが、実装経験がないので、安全保障はありません。
だから、おまけです。
この方法はclear
など使って、float
を解除する必要性が出てきます。
あとがき
4種類+αを紹介しましたが、どれもメリットとデメリットがあるので、用途に合わせて使いましょう。
これっていう、オススメはありませんが「marginを使う」方法は、あんまりオススメできません(苦笑
参考
横並びリストを中央寄せにする – CSSテクニック – acky info
floatで並べたリストのセンタリング – Weblog – Hail2u.net