This is a ul bullet list, and I've been trying to figure out how to get the actual hyperlinks to align to the middle of the icon. I tried a couple of different obvious things like "position" and "padding", but they are not creating the desired result.
Is the image causing the text to be off-centered or am I overlooking something?
Any help is appreciated.
Thank you.
I changed your HTML and CSS a bit:
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 */
}