liを横並びにしたリストを真ん中寄せにする方法(floatは使いませんよ-。今プラスliを横並びにしたリストを真ん中寄せにする方法(floatは使いませんよ-。)Pocketよく使うCSSのコードなのに、あれどうしてやったけ?とコピペでやるからならではの、出来るけど身になっていないシリーズ。ブログに書くことで、コピペだけではなく一つ自分の知識として知ることができるので、書いてみます。今回はよくあるliで横並びにして、なおかつ真ん中寄せにする方法。横並びにしてなおかつborederで横線を指定した本当によくあるコードです。そんなよくあるコードをしっかり覚えておくためブログにしますよー。inlineを使って横並びにして、真ん中寄せが簡単で鉄板。liの要素を横並びにする方法としてfloat:leftを使うというのはよくある手なんですが、これだと真ん中寄せにするtext-align:centerが効きません。そこでtext-align:centerを反映する方法としてinlineを使います。HTMLコードHTMLコードはulのクラス名にinlineとcenterを指定するだけでOK。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の左右に枠線を入れてみましょう。#cecece;}主にしたことはborder要素を指定したことだけ。左右に全ての要素を入れてしまうとpadding文だけ2つの線が離れてしまうため、セレクタで最後の要素にだけborder-rightを使いました。いやー、セレクタ便利。いうことでよく使われるコードシリーズ。ブログに書いておくことで理解度も進みます。コーティングしているとそんな暇ない!コピペで十分と思われるかもしれませんが、今後新たに調べる時間を考えると、20分程度でもとってブログ書いておいた方がいいかもしれませんね。Pocket1987年2月生まれ、滋賀県湖南市育ち、現在湖南市の三雲駅から徒歩20分超の場所でコワーキングスペース「今プラス」の管理人をしております。公園の遊具を家用に買うとしたらおいくら?そんな時はメーカーのカタログを見てみよう。イラストレーターの線幅ツールが使えるヤツ!使ったことがない方はぜひ使ってみよう。イラストレーターのペンツールでLINEスタンプを100個以上、作りました。Youtubeの作者の動画を連続再生させる方法。概略についてまとめてみる。雑感<!-value_right_pc-><!-wrapper->。