html - ハイパーリンクがアイコンと正しく整列しません

Question

これはULの箇条書きリストであり、実際のハイパーリンクをアイコンの中央に配置する方法を見つけようとしています. 「位置」や「パディング」など、いくつかの明白なことを試しましたが、望ましい結果が得られません。

画像が原因でテキストが中心からずれているのでしょうか、それとも何かを見落としているのでしょうか?

どんな助けでも大歓迎です。

ありがとうございました。

Answer 1

HTMLとCSSを少し変更しました。

HTML :

<ul>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
    <li><a href='http://vm2008/catdog'>catdog</a></li>
</ul>

CSS :

ul{
    list-style:none;
    padding:0;
    margin:0;
}

li{
    font-size:24px;
    list-style-type: none;
    height:64px;
    float:left;
    padding-left:64px;
    background: url('http://www.macos.utah.edu/documentation/administration/setup_netboot_service_on_mac_os_x_10.6.x_client.x_client/images/network.jpg') no-repeat top left;
    padding-top:20px; /*  (height-fontSize)/2   */
}

JSFiddle。

Answer 2

vertical-align: middle; を使用してみてください。リンクのために