html - 超链接不会与图标正确对齐

Question

这是一个 ul 项目符号列表，我一直在试图弄清楚如何让实际的超链接与图标的中间对齐。我尝试了一些不同的明显的东西，比如“位置”和“填充”，但它们并没有创造出想要的结果。

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

任何帮助表示赞赏。

谢谢你。

Answer 1

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

可以说：图像对齐=“中间”

Answer 2

尝试使用垂直对齐：中间；对于链接

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   */
}

JSF中。