超链接无法与图标正确对齐

Question

这是一个ul子弹列表，我一直在试图弄清楚如何让实际的超链接与图标的中间对齐。我尝试了几个不同的显而易见的事情，比如“位置”和“填充”，但它们并没有产生预期的结果。

图像是否导致文本偏离中心或我忽略了什么？

感谢任何帮助。

谢谢。

Answer 1

尝试使用vertical-align：middle;链接

Answer 2

使用对齐图像，顶部，底部，中间

让我们说：image align =“middle”

Answer 3

我稍微更改了 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