anchor won't center vertically inside list item - css

Question

I am trying to center an anchor horizontally AND vertically inside a list.
#menu li a {
display: inline-block;
width: 100%;
height: 40px;
padding: 12px 0 12px 0;
text-decoration: none;
color: #AAAAAA;
font-size: 40px;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
http://jsfiddle.net/9FEDC/2/
All I want is an anchor that:
is horizontally and vertically centered
stretches accross the entire parent
EDIT: text-align is working fine but not even vertical-align: middle is working.
EDIT 2: As suggested, I'm now using a line-height equal to the anchor's height. This does indeed get the anchor closer to its vertical center, but for some reason it is still a few pixels off its true vertical center. Here's an updated fiddle...
http://jsfiddle.net/zp5GM/1/
EDIT 3: just out of curiosity I defined a 1px solid border for the anchor element and saw that the text INSIDE the anchor itself is not centered vertically. So things like vertical-align or even position changes to the anchor do not affect anything in this regard.
Can somebody please explain this weird behavior?

Answer 1

As has been mentioned, your markup is invalid. Once that is fixed, you can center the anchor tag by doing something similar to this:
Set the width and text alignment to the anchor's parent instead of the anchor itself.
li {
text-align: center;
width: 100%;
}
To vertically align and element, you can take different approaches. The easiest is probably to give the element the same height and line-height. That way it will vertically center the text.
<div class="parent-element">
<div class="child-element">
<p>This is some text.</p>
</div>
</div>
.parent-element {
width: 100%;
}
.child-element {
height: 100px;
line-height: 100px;
}
You can also position it 50% from the top and then subtract half the height of the child element.
<div class="parent-element">
<div class="child-element">
<p>This is some text.</p>
</div>
</div>
.parent-element { position: relative; }
.child-element {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}

Answer 2

text-align:center;
That should do it.