PROGRAMMING
Warning: Invalid argument supplied for foreach() in /home/mmken1/jiichan.com/public_html/programming/programming.php on line 99
リスト(li)を中央に配置する
リストをナビメニューなどに使用するとき中央に配置したいときがあります。
そういう場合は、floatを使う方法とdisplayのinline-blockを使う二つの方法があるので、
その二つをメモっておきます。
floatを使う方法
<div id="sample1">
<ul>
<li>ドイツ</li>
<li>インド</li>
<li>スイス</li>
</ul>
</div>
#sample1 {
position: relative;
overflow: hidden;
border: 1px solid #aaaaaa;
}
#sample1 ul {
position: relative;
left: 50%;
float: left;
background-color: #cccccc;
}
#sample1 ul li {
position: relative;
left: -50%;
float: left;
border: 1px solid #aaaaaa;
margin: 5px;
}
まず、positionをrelativeにします。
ulの先頭を右に50%ずらし中央に持ってきます。分かりやすいようにulに色を着けてあります。
liをマイナス50%としてulでずらした分を戻すことで中央に配置されるということです。
- ドイツ
- インド
- スイス
overflowはulの右側がulを囲むdivからはみ出た場合の対策です。
displayのinline-blockを使う方法
<ul id="sample2">
<li>ドイツ</li>
<li>インド</li>
<li>スイス</li>
</ul>
#sample2 {
text-algin: center;
}
#sample2 li {
display: inline-block;
border: 1px solid #aaaaaa;
margin: 5px;
}
liのdisplayをinline-blockにし、囲むulをtext-algin:centerにするだけです。簡単で良いですね。
inline-blockは、imgのように「幅・高さ・margin・paddingが指定できるインライン要素」といえます。
- ドイツ
- インド
- スイス
liにfloatの例と同じmarginをセットしても、floatの例と比べてli間の隙間が少し広くなっています。 これは、liタグの後に改行するとその改行を半角スペースとして表示されるからです。 改行しなければ隙間はできません。letter-spacingを使って隙間を削除するという方法もあるようです。