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

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

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

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



これね。

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

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

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

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

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


HTMLコード

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

リスト1
リスト2
リスト3

CSSコード

.center{

	text-align:center;

}



.inline li{

	display: -moz-inline-box;

	display: inline-block;

	/display: inline;

	/zoom: 1;

}

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

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

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

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

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

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

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

コードは下記。

.boreder_li li{

	display: -moz-inline-box;

	display: inline-block;

	/display: inline;

	/zoom: 1;

	padding:0px 20px;

	border-left:1px dotted #cecece;

}

.boreder_li li:last-child{

	border-right:1px dotted #cecece;

}

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

いやー、セレクタ便利。


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


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



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

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。