jiichan.com

PROGRAMMING

CSS
javascript
PHP
Java

リスト(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を使って隙間を削除するという方法もあるようです。