テキストと画像の縦の中央揃えの質問です

下記の参考サイトのサイトマップをホームページ作成の練習として作成中です

テキストリンクの左右に画像が配置されております。
左の画像は<dd>の背景画像。
右の画像は<img>でテキストリンクの右横に配置されてます(html)。

<dd><a>テキスト</a><img></dd>


左は上手くいくのですが、右の星型の画像が上手く配置されません。
<img>にvertical-align：middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。
テキストリンク、画像が縦に中央配置されません。

求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。

<dd>の高さは26px
フォントサイズは13px
<img>は、高さ17px、幅17px
が希望です。

どのように、html、ｃｓｓを指定すれば各ブラウザで均一に表示されるでしょうか？

テキストと画像を並べて、どのブラウザでも中央に表示となると難しいような気がします。要素を並べるとどうしてもずれが出てしまいます。

きっちり並べたいのであれば、例えば

<dd><span><a>テキスト</a></span></dd>

のようにして、<dd>の背景画像に左側の画像を<span>の背景画像に右側の画像を配置して、後はCSSでpaddingなどを調整すれば真中に表示できると思います。この方法が一番ずれが少ないような気がします。