I have a collection of links:
<ul>
<li><a href="#" class="icon26 icon1">Link 1</a></li>
<li><a class="icon26 icon2">Link 2</a></li>
</ul>
Each link comes with an icon. My goal is to accomplish two things: 1) Center both the image and text within the LI tag 2) Fill up the A tag so it covers the entire LI tag
This is what I'm attempting to do:
I can achieve either 1 or 2 separately, but not both simultaneously - any suggestions?
Currently, I'm using an existing sprite solution for the link - this approach may not be optimal, but can be adjusted if a solution is found. Here's the CSS snippet:
.icon26:before
{
background:url(/assets/images/sprite26.png) no-repeat 0 0;
content:"";
display:block;
float:left;
height:2.6rem;
width:2.6rem;
}
.icon1:before
{
background-position:-32px -2px;
}
And here's the rest of the CSS for the UL structure:
#nav ul
{
width:100%;
}
#nav ul li
{
float:left;
width:33.33%;
}
#nav a
{
display:block;
line-height:4.6rem;
}
#nav a:before
{
margin:1rem 0.5rem 1rem 0;
}