Vertically Align texts with different sizes in <a> - css

Question

I want to align an addition(plus) mark and text next to it, however, since the "+" is too small, it is enlarged with a tag. This causes the character to become too big, making it hard for me to align them. How would I align the + character and Text evenly next to each other?
This is the code:
http://jsfiddle.net/rs75V/

Answer 1

Have you tried
vertical-align:middle;
or
vertical-align:-10%;
? This looks all right to me.

Answer 2

Try playing around with this:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I think it's what you're looking for, it has a ton of different ways to move text alignment up or down.

Answer 3

It's hackish, but this should work.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
line-height:40px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
vertical-align:-15%;
}

Answer 4

Try floating your a and span.
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
cursor:pointer;
line-height: 40px;
float: left;
}
span {
font-size:40px;
float: left;
margin: 0 .1em 0 0;
}

Answer 5

You can display the span as an inline-block and then use padding on it...
a{
font-family: arial, sans-serif;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #BBB;
color: #333;
padding: 4px 10px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
font-weight:bold;
font-size:20px;
display:inline-block;
cursor:pointer;
}
span{
font-size:40px;
line-height: 0;
display: inline-block;
padding-bottom: 9px;
}

Answer 6

Try this:
span {
font-size: 40px;
line-height: 0;
vertical-align: middle;
}