何度やってもできなかった人も！横ならびリストで上下左右中央に。

こんにちは、クリエイティブフレークです。





コーディングの鉄板、リスト。

横ならびリストで文字を上下左右中央に配置したい、ってことは１度は遭遇したことがあるかと思います。

でも思うようにいかないんだけど……って人も必見、絶対にできます！





↓↓↓まずは基本はこれだけ覚えましょう。↓↓↓



HTML

<ul>
<li><p>リスト１</p></li>
<li><p>リスト２</p></li>
<li><p>リスト３</p></li>
</ul>

CSS

li {
 float: left;
 list-style-type: none;
 margin: 10px;
}
li p {
 background: #8AD5DF;
 border: 1px solid #eee;
 color: #fff;
 font-size: 18px;
 display: table-cell;
 width: 150px;
 height: 100px;
 text-align: center;
 vertical-align: middle;
}

"text-align"が左右中央で、"vertical-align"が上下中央。

そこへ"display : table-cell;"で要素の表示方法をtdのような要素に指定します。



あとは、このリストに好きな幅(width)と高さ(height)を指定すると、指定した大きさの上下左右中央に文字が来るはず。



たとえば、背景画像が決まってって、その中に文字を収めたい、ってときにも便利です。


他には文字の長さが決まってないとき、可変にしたいときにも、自動的に上下中央になってくれて便利です。




ありがちなミス
今回<p>タグを内包させ、リストに対して"float : left"を、その中の<p>に対して上下左右中央指定をしましたが、これを一緒のタグ内で行うのはNG。 この"float : left"だけは別の要素で！





横ならびリストで上下左右中央の応用


文字だけじゃなく、画像や要素全体をリストの上下左右中央に配置したい！という場合も同じ方法でOK。

↓↓↓こんな電車の駅名標みたいなものだって↓↓↓

HTML

<ul>
<li><p>東 京<span>Tokyo</span></p></li>
<li><p>神 田<span>Kanda</span></p></li>
<li><p>御茶ノ水<span>Ochanomizu</span></p></li>
<li><p>四ッ谷<span>Yotsuya</span></p></li>
<li><p>新 宿<span>Shinjuku</span></p></li>
</ul>

CSS

li {
 float: left;
 list-style-type: none;
 margin: 10px;
}
li p {
 border: 1px solid #eee;
 font-size: 24px;
 display: table-cell;
 height: 110px;
 text-align: center;
 vertical-align: middle;
}
li p span {
 border-top: 10px solid #008836;
 display: block;
 font-size: 14px;
 padding: 2px 100px;
}

Written by Creative Flake