vertical alignment of text in span - text outside span - html

Question

I need to have span with text aligned in the center.
Previously I have used line-height for this purpose, but in this case the text for some items are longer and this doesn't work any more.
JSFiddle: http://jsfiddle.net/4jSdu/
HTML:
<ul>
<li><a><span>Short</span></a>
</li>
<li><a><span>Why Should I Monitor?</span></a>
</li>
</ul>
CSS:
ul {
position: relative;
overflow: hidden;
}
span {
background-color: rgba(216, 25, 11, 0.75);
display: block;
height: 70px;
line-height: 70px;
width: 135px;
color: black;
text-align: center;
/*margin: auto 0;*/
font-weight: bold;
font-size: 15px;
position: absolute;
bottom: 14px;
}
li, a {
width: 135px;
height: 100px;
display: inline-block;
}
EDIT:
I want to note that span element has value bottom: 14px. THere is also animate effect on this span. when page loads span has value bottom: -70px (container has overlfow: hidden,s o this span is not seen) and then it appears (using .animate) and goes to bottom: 14px. So the sollution should consider this.
I cannot get this animate effect working in jsfiddle (http://jsfiddle.net/pr5cL/), but it works on my page that is locally created.
$("ul li:not(.img_active)").mouseenter(function() {
$(this).find("span").css("bottom","-55px");
$(this).find("span").animate({bottom:15},500);
}).mouseleave(function(){
$(this).find("span").animate({bottom:-70},500);
});
Here is link: http://www.sheerdigitaltest.net/janus/

Answer 1

Something like this maybe?
span {
display: inline-block;
line-height:1.25;
vertical-align:middle;
width: 135px;
color: black;
text-align: center;
font-weight: bold;
font-size: 15px;
}
a {
background-color: rgba(216, 25, 11, 0.75);
height: 70px;
line-height: 70px;
font-size:0;
overflow:hidden;
}
li, a {
width: 135px;
display: inline-block;
vertical-align:top;
}
span {
-webkit-animation: slidein 2s ; /* Safari 4+ */
-moz-animation: slidein 2s ; /* Fx 5+ */
-o-animation: slidein 2s ; /* Opera 12+ */
animation: slidein 2s ; /* IE 10+ */
}
#-webkit-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-moz-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#-o-keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
#keyframes slidein {
0% { margin-top: 70px; }
100% { margin-top: 0; }
}
Jsfiddle
No IE7 or earlier support. Animation support as per comments.