上へ戻る

liを横並びにしたリストを真ん中寄せにする方法(floatは使いませんよ-。)

Pocket

liで横並び_アイキャッチ

よく使うCSSのコードなのに、あれどうしてやったけ?とコピペでやるからならではの、出来るけど身になっていないシリーズ。

ブログに書くことで、コピペだけではなく一つ自分の知識として知ることができるので、書いてみます。

今回はよくあるliで横並びにして、なおかつ真ん中寄せにする方法。

liで横並び_1

これね。

そして横並びにしてなおかつborederで横線を指定した本当によくあるコードです。

そんなよくあるコードをしっかり覚えておくためブログにしますよー。


inlineを使って横並びにして、真ん中寄せが簡単で鉄板。


liの要素を横並びにする方法としてfloat:leftを使うというのはよくある手なんですが、これだと真ん中寄せにするtext-align:centerが効きません。

そこでtext-align:centerを反映する方法としてinlineを使います。


HTMLコード

HTMLコードはulのクラス名にinlineとcenterを指定するだけでOK。



CSSコード


CSSコードはCSSで横並びにしたリストを中央揃えにするのページを参考にしました。

このコードを使用することでliはinline要素になり自動で横並びになってくれます。

inline要素とはdisplayプロパティの1つで、block要素と違ってテキストとして扱われます。

aタグやspanタグで囲まれた内容が改行されないのと同じでテキストなので改行されずに今回の場合、横並びになります。

inline-block要素は、inline要素の場合例えばaタグで囲まれているとリンク範囲が文字だけになりますが、inline-block要素はmarginやpaddingで出来た空白に関してもリンク範囲となります。




borderを使って、li要素の左右に枠線を。


inline-blockで横並びにしたliが真ん中に寄ったので次は、そのliの左右に枠線を入れてみましょう。

コードは下記。


主にしたことはborder要素を指定したことだけ。ただし左右に全ての要素を入れてしまうとpadding文だけ2つの線が離れてしまうため、セレクタで最後の要素にだけborder-rightを使いました。

いやー、セレクタ便利。


ということでよく使われるコードシリーズ。


しっかりブログに書いておくことで理解度も進みます。



コーティングしているとそんな暇ない!コピペで十分と思われるかもしれませんが、今後新たに調べる時間を考えると、20分程度でもとってブログ書いておいた方がいいかもしれませんね。




Pocket