Vertical align text within button - html

Question

Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.

Answer 1

Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}

Answer 2

I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/

Answer 3

BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}

Answer 4

This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>