html - How can I vertically align the text on these CSS buttons? -

jsfiddle: https://jsfiddle.net/u7lm5sjp/

i have links like:

<div class="splash_button_row">         <span>         <a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>         <a href="www.google.com" class="splash_button">label 2</a>         <a href="www.google.com" class="splash_button">label 5 label 5label 5</a>         <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>         </span> </div> 

and while bunch of .css like:

.splash_button { background: linear-gradient(to bottom, #3498db, #2980b9) repeat scroll 0% 0% #3498db; border-radius: 30px; text-shadow: 6px 4px 4px #666; box-shadow: 2px 2px 3px #666; font-family: georgia; color: #fff; padding: 10px 20px; border: 2px solid #216e9e; text-decoration: none; display: inline-block; margin: 10px; white-space: normal !important; word-wrap: break-word; max-width: 130px !important; text-align: center; font-size: 20px; height: 65px; vertical-align: middle; } 

the key fiddly bits here being:

height: 65px; vertical-align: middle; 

these 2 properties seem fighting 1 another. if set vertical-align: middle; text aligned, , padding evenly drawn around it(which want). when set height: 65px; make of buttons same size, text seems pushed top of button.

how can have of buttons same (set) size, have text within them vertically aligned center of 'button'?

edit:

i've read this question doesn't answer question. buttons have multiple lines, tricks line-height don't work, , buttons need in-line elements, tricks flex don't work. buttons need spaced, table-solutions seem hinder - i'm still playing around one.

change display table-cell vertical aligm middle work.

.splash_button_row {    display: table;    border-collapse: separate;    border-spacing: 15px;  }  .splash_button {    background: #3498db;    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);    background-image: -moz-linear-gradient(top, #3498db, #2980b9);    background-image: -ms-linear-gradient(top, #3498db, #2980b9);    background-image: -o-linear-gradient(top, #3498db, #2980b9);    background-image: linear-gradient(to bottom, #3498db, #2980b9);    -webkit-border-radius: 34;    -moz-border-radius: 34;    border-radius: 34px;    text-shadow: 6px 4px 4px #666666;    -webkit-box-shadow: 2px 2px 3px #666666;    -moz-box-shadow: 2px 2px 3px #666666;    box-shadow: 2px 2px 3px #666666;    font-family: georgia;    color: #ffffff;    font-size: 20px;    padding: 10px 20px 10px 20px;    border: solid #216e9e 2px;    text-decoration: none;    display: table-cell;    /* table-cell */    border: solid transparent 0 10px;    margin: 10px;    white-space: normal !important;    word-wrap: break-word;    max-width: 130px !important;    text-align: center;    vertical-align: middle;    height: 65px;    /* add height*/  }

<div class="splash_button_row">   <span>  	<a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>      <a href="www.google.com" class="splash_button">label 2</a>  	<a href="www.google.com" class="splash_button">label 5 label 5label 5</a>      <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>  </span>  </div>