Align text vertically and horizontally in CSS button - html

Question

I have a that has been styled in CSS to look like a button. The problem I'm having though is that the button MUST be 185px wide and 75px high. Which I get right, but the text of the button is floating somewhere on top to the left.
How do I get the text to display exactly in the middle of the button? I've created a JSfiddle so you guys can check it out.
//Ignore this comment.

Answer 1

Change height to line-height and add text-align:center
.button-large{
text-decoration: none;
display: inline-block;
text-align:center;
width: 185px;
line-height: 75px;
font-family: sans-serif;
color: rgb(116, 79, 145);
font-size: 24px;
padding: 10px;
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.6);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(156, 125, 185);
background: -moz-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -webkit-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -o-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: -ms-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
background: linear-gradient(0deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
-webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
}
DEMO