Issue with getting text into the centre of div - html

Question

I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}

Answer 1

Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}

Answer 2

If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}

Answer 3

Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.

Answer 4

i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}