Align <a> inside a <li> - html

Question

I am trying to align <a> tags inside <li> but i can do it verticaly. But the <a> is allways in the top and i want to center verticaly and horizontaly the <a> tag
How you can see at the image. I need A. but Getting B.
This is the HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<ul>​
And this the CSS
ul {
line-height: 85px;
}
li {
float: left;
height: 85px;
line-height: 85px;
border: 1px solid red;
}
a {
height: 40px;
line-height: 40px;
width: 40px;
display: block;
text-align: center;
border: 1px solid blue;
}
​You can see the jsfiddle
http://jsfiddle.net/Mum5e/

Answer 1

You can try using display:table-cell and vertical-align:middle. As I recall, this is a cross browser solution.
See this Fiddle
Edit: with fixed width anchors: Fiddle

Answer 2

You can try an approach from this site: http://phrogz.net/css/vertical-align/index.html
I've put together a quick fiddle showing this: http://jsfiddle.net/Mum5e/1/
Basically, by using absolute positioning with a top pointing to the half-way mark (50%) inside a relatively positioned element, we can get it to center. However, since we want the center of the link, not the top of the link, at the 50% mark, we change the link's top margin to offset it by half the height.
Note: by changing the link to absolute, we have to give the li a width, since the a will no longer force the li to take its width.
css:
ul {
line-height: 85px;
}
li {
float: left;
height: 85px;
width: 40px;
line-height: 85px;
border: 1px solid red;
position: relative;
}
a {
position: absolute;
top: 50%;
margin-top: -20px;
height: 40px;
line-height: 40px;
width: 40px;
display: block;
text-align: center;
border: 1px solid blue;
}

Answer 3

Well, iv'e played with it a bit and this worked for me :
a {
height: 40px;
width: 40px;
margin-top:22.5px;
border: 1px solid blue;
text-decoration:none;
}

Answer 4

One solution is to give it a top margin of 21px (height of container, minus box height of element (border+height in this instance) divided by two).
Another solution, is to give it a height and line-height of 85px, effectively centering the text, but making the element taller.
At the end of the day, I'd probably go for rdiazv's solution, mainly because it's the simplest and easiest to maintain.