listの画像位置を調整する。

<div id="side_nav">
	<ul>
		<li><a href="#">A</a></li>
		<li><a href="#">B</a></li>
		<li><a href="#">C</a></li>
		<li><a href="#">D</a></li>
		<li><a href="#">E</a></li>
	</ul>
<!-- end[div id="side_nav"] --></div>

#side_nav ul{
	list-style:none;
	padding:0px;
	margin-left:20px;
	line-height:1.5em; /*emはMを基準にした大きさ（ここでは行間）*/
}
/*
拡大縮小した時に縦位置がずれないように、liに画像を配置する。
*/
#side_nav li{
	background-image:url(../image/li_icon.gif);
	background-repeat:no-repeat;
	text-indent:20px;
	background-position:center left;/*背景画像の縦位置の指定。*/
}

普通にulの list-style-image: url('../images/XXXX.jpg')"と指定すると
縦位置の調整ができなかったりします。
そこで、liのbackground-imageを指定してやるわけですが、
文字の上にかぶってしまうので、text-indentで調整し、
縦位置をbackground-positionで指定します。

なお背景の細かな指定も可能です。数値で位置をしていする場合は、横（右側へ）、縦
（下へ）指定します。

background:url(../images/XXXX.jpg) no-repeat 0px 7px;