アイコン画像とテキストのズレをCSSで修正する簡単な方法

img要素に｢vertical-align: middle;｣に入れるだけです。
img{vertical-align: middle;}






ul{
margin: 0;
padding: 0;
}



ul.test01 li{
margin-right: 10px;
list-style: none;
font-size: 12px;
display: inline;
}



img.test01{    
vertical-align: middle;
margin-right: 10px;
}






リストマークとテキストを揃えたいときには、画像を「背景画像」として利用するといいのです。
----------------------------------------------
<html>


<head>


<style>

ul　{list-style-type:none;


　　line-height:180%;}


li　{ list-style-image:url(images/sankaku.gif);}

</style>


</head>


<body>


< ul>

< li>メニュー1</li>

< li>メニュー2</li>

< li>メニュー3</li>

< li>メニュー4</li>

< li>メニュー5</li>

< li>メニュー6</li>

< li>メニュー7</li>

< li>メニュー8</li>

< li>メニュー9</li>

< li>メニュー10</li>

< /ul>


</body>


</html>

------------------------------------------------
位置がずれてしまった状態の記述はこのようになっていました。
li　タグに　list-style-image として画像が設定されています。　
ここで、この代わりに背景画像を設定します。
------------------------------------------------
<style>


ul{list-style-type:none;


line-height:180%;}


li{ background:url(images/sankaku.gif) left no-repeat; }　（背景：画像のURL、位置を左、表示はリピートしない）


</style>